{"_id":"@material/mwc-select","_rev":"699-281f60df83c3d9a22bceb62f36443d8f","name":"@material/mwc-select","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.13.0":{"name":"@material/mwc-select","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=5.0.0-canary.a1a0deb3e.0","@material/floating-label":"=5.0.0-canary.a1a0deb3e.0","@material/line-ripple":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","@material/mwc-floating-label":"^0.13.0","@material/mwc-icon":"^0.13.0","@material/mwc-line-ripple":"^0.13.0","@material/mwc-menu":"^0.13.0","@material/mwc-notched-outline":"^0.13.0","@material/select":"=5.0.0-canary.a1a0deb3e.0","@material/theme":"=5.0.0-canary.a1a0deb3e.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","_id":"@material/mwc-select@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-o2AWtxIy5LSIFDePVW5qpsJXVCLO9cNRBZhuSSCcYlorrrhZFKZcugrgLfRQGefUsuJoUDQRUT/rMmHAJK7Z0g==","shasum":"cee546e96c44d01c88776949868728ded42b91be","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.13.0.tgz","fileCount":45,"unpackedSize":869045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPc+CRA9TVsSAnZWagAANOEP/0Zi3MHhwuxUBkQM8Ahs\ncDzQA7Rnoaopi7ZQHYLbakfLN0u2QePG9lNVP/4YSieFWpvXiW+zsC9Acv5u\n+5zG6FtARHNTHZGHrXVMHEJZGtIuQGx+5vRal44R0Pl0DLEk6Z1fClm+8k/l\nFHCRqvYQXNG+IiMFSbDPbuL1tecbfyraeXp4gu4l5NKMu1lvjS8ZmD9H4IRi\nRlOCf0aCluYF9VX79jlIOkma346xugJ9+pKHMfYguPD/Bv+mFiwjohcJ6H28\n4fo1hxgvunQ9RfGttv/5WzZrnchZYI9rAtNecmLQu1+jVfbqkuSCm90kxSI9\ndpWopPfxKr3N83dXNk6LCbHfdppIaOU1alisiAgOxS52JkBzrUQDnc0tu+bq\nd8JKtqiDEO/9IO5GnZr7S8kEMOQBCTdGjobhcRFiet185p15TXkl5ER/o7uu\nokMKIvqLfXGMnsrSsGO1HEwD0Ec7VYp1xmA/FFwGkYMmPxYXbe0MIuLTf8o7\n4CFfpDcQlNDry1yf/0SsNIAdkEw9do7icSfJ5sWCzHR6Nybt2sH6/cB47FVD\np2h+D5NfDXXNoCK14j/qWYHWBVrim92Vf9P1vU9Ki6fIRKzrDs/MjfyQ//+E\nvbniwhicWfne8shRiF8gKrzIGQlhkpw7GrkO+94byDL6PyUh4Wp8wlM2ztCo\nMZeY\r\n=Vmi2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDxl3wlbMqxqxexT8IHhTLTJRMsCuWLKMBhLugYdJqPNAiEAhy4Nv8xoyWKdZ7o+ZQYIJg++M5cOnlqhculHK2i/DOk="}]},"maintainers":[{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.13.0_1580791613742_0.10670648365487634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-select","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.781434a92.0","@material/floating-label":"=6.0.0-canary.781434a92.0","@material/line-ripple":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-floating-label":"0.14.0-canary.f790f713.0","@material/mwc-icon":"0.14.0-canary.f790f713.0","@material/mwc-line-ripple":"0.14.0-canary.f790f713.0","@material/mwc-menu":"0.14.0-canary.f790f713.0","@material/mwc-notched-outline":"0.14.0-canary.f790f713.0","@material/select":"=6.0.0-canary.781434a92.0","@material/theme":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `value` | `string` | `\"\"` | The select control's value determined by the `value` property of the currently selected list item.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Nv1KRLKrpC7pkhUWjUDkqhmH973o3C2pF7+9dnyj+rdab6Rf+iE/XQqNKD8/cHeMbTMWicrSPMX+A+DPP1cnNg==","shasum":"5f2b51195fa78f3a249849a604f67624bd5c0c51","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.f790f713.0.tgz","fileCount":45,"unpackedSize":871778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrlCRA9TVsSAnZWagAAu60P/jpVWBWYvMuRGHn+SHIS\n2pWPriPKp/HAmXOJQL/VHhAX8WbqMfFVAf1BGxxQ6NnPrJTu/VyluQm7qkps\nGWR2rB1cLx81xSWtNe6RE6W9R+LWSMpChvzTpQAow0Kcx3FUilfymdvwxl/Q\nGse970B8i0zhU8RKoR2ykwienpXPo7l1XBMvaBd93DJSi7CQQ/VuyQLfmtGT\njCpO3z+HpzwGjppC7Y7Q2mP/gVPXAM5tIFKTRMTqkEJCKnIDYiA/bq5z/VAQ\nt90LMhk48MOaafWLiuRRMR9VMZFwNwXAWeD6Qn/OUOWEVOi1v62zl8TmSiqI\ngitJBHATQlQ4Ejbz02rbotOGL0ZpH54fHMLN6qqfWtxP+0LY9huQznJHeSuY\nfjFToEs3sTZp4ndZlgc1HZrniA1VophZQBXet+dM0lL+mQBuUWTXzTFNALeG\nswR1/XVPcHxIwNdbPrKhVKsFu8wXfUbPD3nlbFGJqan8w3YgW1AcVUKJ0QlZ\ndKEZSQZgubIwFvbLm4cwvAlBf+gq1f+8QteWj8Djm4/tbDsOqtrE50V9Ws/U\no1TnIoImjO+R8u+nt86IopRbwfyt/ExzcgZBMSK99x42ccJ4xKck5Z0aYrCA\neR5IU0VsSlu/OuT1nc189Mprj5goqqKleNYh/yYJpi2JMm0pmF4lN7gq/sFy\n7eWZ\r\n=wfyX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzyIpDhduCji59Dq0D10pP27eTBAOwtB1Ct6Qae46EvQIhAPUQ43nyYxKOX9coel8VejxzoW5btEyw4JQqWJ28mEk/"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.f790f713.0_1582856932865_0.34293703839970635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-select","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-floating-label":"0.14.0-canary.c759cfbc.0","@material/mwc-icon":"0.14.0-canary.c759cfbc.0","@material/mwc-line-ripple":"0.14.0-canary.c759cfbc.0","@material/mwc-menu":"0.14.0-canary.c759cfbc.0","@material/mwc-notched-outline":"0.14.0-canary.c759cfbc.0","@material/select":"=6.0.0-canary.69edc6e28.0","@material/theme":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `value` | `string` | `\"\"` | The select control's value determined by the `value` property of the currently selected list item.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ekMeIUViswznh6ezemjEBsR2/DSwjic1kXvP3HJ5wW1vhtbm4yOZ+092Z6PU/2jI7eVIqorIAJjRHAP7hy0bYA==","shasum":"135b5d16be07eeb229e472b432ad010a9ceedf34","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.c759cfbc.0.tgz","fileCount":45,"unpackedSize":871778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWarHCRA9TVsSAnZWagAA5JsP/RQJWhbrSRXX3nkA/iEn\nwxA477Y4tQT1ryErYNniX5XOL6UiD3wZAhPGyWanUTit32JOltjszZt1fbsw\nQznR0VZZWBk9lhRTC/evhLRVPvFXh1T/UX8ZmlQ9cElNK56c1z1GdEFgSgda\nJYa91TOcPW8+82QJIdTwbz2NaNwEsUC5DI0XIZCnVAIJWs/B3X+R8Thspg5P\nz/zEgSSKZ0mZQ9N1bxdW4YfrUB4Uj1wzq7s6Nm0rAkAj+s5HL4Qo2BBoPmQS\nxEdz2qKfz5jBsvMaaNhDo91t1RHqZChCFPtxWNAMB1s8EVhAPalfzLG9NamB\n4CDUExGkEutsAxzsgKnUVWaKetBu8RMS25912sXBLIhuRlubLurBy2Kw3+IZ\nDfD24qzKHc7doP57LtX5N4CZep8WGad/9kX9eSAKvxRAIpC8f58GiZxbCfJT\nbSlK+3/0VLU0VS2BAGVn+HUk5ACcWybfRD8BLke4+vwDS4vEkh3BEHgm0OX0\n1Odxr1TJdQALmkrh4ip+AXBMKN95y1zOQIR+aIRNmhneEhBwDLbeDn6dGzlt\nKmBPeM5JQacSBSc9ubppLnUfZlBajda2onsO23sOQ+dYKUm+42PbTH+8EtcR\nAwrg4vyGi8EUh6fRxmkTQniYbKhineiSVapTt7Kk17uR4j/+eu3dzACXDxKH\nPsUW\r\n=hayN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqKcmYwZydQO2eQrBhEM8Xeuz7wQd3tgSN3ySlARrmkAIgZGOA2HMFH0dGpWLbuTKAjR2zqaw7m33y6yckihsBMvc="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.c759cfbc.0_1582934727194_0.6646449998021207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-select","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-floating-label":"0.14.0-canary.97ef53d8.0","@material/mwc-icon":"0.14.0-canary.97ef53d8.0","@material/mwc-line-ripple":"0.14.0-canary.97ef53d8.0","@material/mwc-menu":"0.14.0-canary.97ef53d8.0","@material/mwc-notched-outline":"0.14.0-canary.97ef53d8.0","@material/select":"=6.0.0-canary.69edc6e28.0","@material/theme":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `value` | `string` | `\"\"` | The select control's value determined by the `value` property of the currently selected list item.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZN3YP4G8UFOJLf1R35V+PsZc6Mi4zryaQva8oHccTMBv3wSYiQJvc7uj+OF4H5WTU7RIdrKAFcucRVXpsvccwg==","shasum":"d9eafae920d07a8ff85d093b84bbd97741ad0109","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.97ef53d8.0.tgz","fileCount":46,"unpackedSize":890395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3rCRA9TVsSAnZWagAAyB8P/it+wADXC5HikOofOYCS\n/mJzhbSi/ILmXWPALvek6ua3F+oL8uu6uTTv+6If6ma5TWNRHK4W19g8TlkU\ntWjoFakN+y5OLPs8B9Ivkx6LCgKmGm2er54FQpqEjhReebyM+5R8YnBlReQv\na1ne2l597NZnNFJ7oPISdOP6Cu7E1qIED3tY2/bp8Z0PKsgaqub8BxSCIrPN\nlnYTY16KfEi25v+MlZHcPYzqUVRamDVbzSUFQp+mSAX3Ou6BRrpGFTHIoX4O\n/tzZA/dncNf0AE56TiKslvWc1UJGlf1djGxylWsjHdJo58uZDxGxOefWUTvH\nXAOIfcMYpJLf0x4MGPVCdfedS4iTDRi5RYou8Y5tRnQtNsBMuqWz+jUYegWH\npdg2/xasLPLq1goEjqezyn61H7JaBjZ7F+rWCvPNIEL1p7FrWaoNFzHm0OXW\nrklUWIdIgEgzGGpS0NhMUnabBuS4tSHJe/0g4DE1IEBiEClzrGWzQNH/Zds0\nx6eFoyPZ8F2KaT9iV2s38jlygd5oqFuHKp4k+jAia4qnMmoqTbEvrj6GJ9u0\noZqSG+6zxUnlnJC22JSPN4bfhYwtQtlwJoqePptnCuMlBUBSlgKpoJ7CATVK\nW+0Xa0T6mEAr1eUwIBf4/nEzGqP/ep5KPbFEclxC8+LLUnaAJau3Qq6I/HQB\nbMog\r\n=56Gb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEr+dMyIt9RnSk1L8SkbmHyRzK6mjfHsw5mYZ+dpwJubAiBQ2za6KQv5pHux2nKGtUyTMwCCxC92XTX2riS2heAwtQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.97ef53d8.0_1582935529144_0.13784618993670494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-select","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-floating-label":"0.14.0-canary.24f5fa6e.0","@material/mwc-icon":"0.14.0-canary.24f5fa6e.0","@material/mwc-line-ripple":"0.14.0-canary.24f5fa6e.0","@material/mwc-menu":"0.14.0-canary.24f5fa6e.0","@material/mwc-notched-outline":"0.14.0-canary.24f5fa6e.0","@material/select":"=6.0.0-canary.69edc6e28.0","@material/theme":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `value` | `string` | `\"\"` | The select control's value determined by the `value` property of the currently selected list item.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-q2Qa2wSmq8AnFO3bbpZ5bDqiy6tUeqQGmsqSATy6NHQznSAJVFl1tq41qQqQB3C9wJcoRhR5n4cXjzlh4J0KSQ==","shasum":"12929aff54b18182ccb085cc8e105154ad442af2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.24f5fa6e.0.tgz","fileCount":46,"unpackedSize":890395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbm7CRA9TVsSAnZWagAAhBEP/RAwEZn+6mLdMRAjxi4/\nqe54cyjZ3ZWtmh7lKO4S00zs1lcao6g0VuThj5G+jLwwYoGIJ4koH/DK+1NG\n5UOJm5JJs2RL5pIzR4mI6Mu2GTBvYFHW1eWRW7oaC7KUQOgTlKC6/ln70fJi\ne/znPA5VnZNgVPA9VI/nFhQzf+33pKr3GJyeOHQpBw+UwGEN3kos4m6SFYK/\nvYEYWZixZ2hmhFzuIKDYxCUMNidyOeaEI32XExKCBwA3g1boJ+v/bsjHFpj+\nTxEDAYSpFk2eXViILZlGBzryFz47OQ4vYP7krXslS8EYgfEQOPAMJ+wHnnEq\nHHIYUg98PztVEkdgwaUCjq5V7S2Jv/lJw+wl/7cMdVAfOBkgQu8qfj843hHB\ngwvzjAEhW2AaNQ0JdrrJ6N1qv3sWwsWNsDbpdkkOS9oBL7Cy94gGl2CWCDus\n7I5i6dwMuQaBTmykUfEGMKh8hQKRzgur/F3QwCMjHkcg7ZQS/SBstjBnmUQF\nDb9/8S/BjvHUqwQ3/tOX3oZ/0Odoh8tGGgTwpf8YeK8eGY8tzsLlLqoEWhTJ\nxwpWrgrKXJUWvFxjosaRD3X6a+YS4utts32X94Lb4Q+ctneTK1mCukmhQ9YB\nleuw8WIYeqkT9IOYmoVI1YmFFhdkmVXdZ7laMf+Qu1PyurkZ033NKJmvGW+x\nxTNZ\r\n=AjQe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMoRRSJWfPAyvtcIROGbharNj1G0pSmVTzWDo/vKlGdAiEA14uSMz3dhBTkKHVRqLW+rMKfLNuHw5fHKTpTkxvPe+c="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.24f5fa6e.0_1582938554638_0.32238606014702875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-select","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-floating-label":"0.14.0-canary.960e214f.0","@material/mwc-icon":"0.14.0-canary.960e214f.0","@material/mwc-line-ripple":"0.14.0-canary.960e214f.0","@material/mwc-menu":"0.14.0-canary.960e214f.0","@material/mwc-notched-outline":"0.14.0-canary.960e214f.0","@material/select":"=6.0.0-canary.69edc6e28.0","@material/theme":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `value` | `string` | `\"\"` | The select control's value determined by the `value` property of the currently selected list item.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QTrUY5i1S1Vpc1TVv5n7C8cbJnakLPa1SpC/WEqmfrCZCO2n2Xzi4OsfQLR4uEqCOF4J7TnEldwfkRCb2nVN8A==","shasum":"2bb18d0af7a1cdd687f7d6450c04fdd56c133276","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.960e214f.0.tgz","fileCount":46,"unpackedSize":890413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXvCRA9TVsSAnZWagAA4jUP/3m3+RiK873LJGr32T8n\nBZJh5899aD2Rt1os6SFIz3dWBnLWAxBUt0AyFTBmll8LgjOBuQ9j84XD7jR6\nXALfKQyekZ4KydZb3mvREo1k8HYee4wDOTzY7yLAuBla82od6fXoKdH1wUzA\nptJh6Na7kQWPSoDAZPQTQk11UHaIhKVOaHEeGhx6LBgMh8ReYL7uV/ES5QZ6\nQ/pujqmz7QZ0NABPuPTg1hZfC2pW1XMSALNXkJPW+FNUqkFWRuUiBSyfdOkz\nZQ16kfewYOkkMeOyWsc5+VU60ubXZnJ5XABDFMxWq+LR1o8RTtpxsARfesPm\nJpwwyKjuqecHmSg3/zfn1kkMEuJTYYjVJvJ4eSq7UHq4pe2bCUffF18FTAv/\nDS1CTnweQVLZMOwtMwOKuRvzLwtgpusHwzewwSeQb9FeC6kOVl/3UMr8+VgD\nJs0xMMVymAM+lpNO4SA967yCA0e010BWZemnUCS/yVnRcKOcccBu56+EITMp\nD7dLXksTfM6/bQ6ov0Gn4uKTIzJjEciTEOjcYeH8zvJDC3F1/j890rl6dggL\n+4wzGd+YJW/Tt5Aa25YGNyl85vRcv/S9P9PiLVPA2xd7js/9H2YjsJwcspyg\n4XjJItzHfUfJqt/Tg7Ada/gaE1d5A0Zg0iNKDecg1O9Vy1z/YfYwJLFmT9Vh\nKQeK\r\n=Jc2R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHl5Fb/cxafZarm2iI4oCn0Vt56BStgj04ZPpoIlTw7dAiBDoyhWpXOQxucIA0w1R7S+cZeeMVzyE9K1NNV3BqolYQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.960e214f.0_1582945775107_0.04668917700226394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-select","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-floating-label":"0.14.0-canary.a2f046f5.0","@material/mwc-icon":"0.14.0-canary.a2f046f5.0","@material/mwc-line-ripple":"0.14.0-canary.a2f046f5.0","@material/mwc-menu":"0.14.0-canary.a2f046f5.0","@material/mwc-notched-outline":"0.14.0-canary.a2f046f5.0","@material/select":"=6.0.0-canary.69edc6e28.0","@material/theme":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `value` | `string` | `\"\"` | The select control's value determined by the `value` property of the currently selected list item.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-M6ni3dHcUYmbNNgJVECsPcBxGhsLO7qMz+oBweoq4tlM/23o3bja8uAJJm5yGCR/GRuG4XsByYEBAX8MreRJSg==","shasum":"f89f36837a5d4d2401bfa4862968f8b976bb45e3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.a2f046f5.0.tgz","fileCount":46,"unpackedSize":890404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXattCRA9TVsSAnZWagAApZkP/jFxXld5G1MSeL2xq8tY\nCx3pFptk/yg2IBXQELexoMUbVaVT5aOW63+HMHqgjSEuxEXrhHwzzg6bsQzY\nbkEy2Hh4UFchcbDS8mvcsarqotvhQorW0zcpvH/xwOLXfhXwKty3Gl/JaHEH\n26hSrkg8Oqx6Tx7AgirqnIgjBTTX2oN1SOAJfADY9WFr6aazWRDnt3+iJ1S1\n/ikAoc8eaRluhP6KsC1RYt8l7nhtw5dxPS5tMuDkaN9P3GgEPUrRRDP1p5BB\n314btcV7Yr+aEmGFNC5snUl4v8KkCuRKXAWqdrOg0zdoFTDP1jLormY2a3wT\nf8EjCZbjh0un6520CFmUueczzCFDU3hQoaT+Cu8En93OOATu7yBjxvXbPSf/\nM1VKmUFFFWWYWhyPjx4IlR2uvXRr8ddEJ8MeBqCE4r0ytgMJeqIOnowD76w9\nByQGE7u2rFCYM8QF7iuF/TG25dpc5UIaiTnAFYuZoS0as6FOnAY8DTlZGb2d\no/g9WoF4gLQekhGapxTsYJ04ZufSPqJh799i3bh7r/uPTWFBcEVYs/1GzYTd\nIN2TgPm8VXr+qnvSd5iBW8wCWcQrms4dkFpBQRW6wNCAZMpPS800lwahZCt/\nZUIU4wF/tOl/jNuoygYvi6z9ZKwzUlFdi6cwK0haZduyRurZYxqERXfMPwBA\nuISf\r\n=F3u2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdhtvSCLYs5W3Wer6iMY2mkGQWYjVDc4rhEpfrmS972wIgd3rfOIMdk32sPXnQPlTtLQXE3jhxGeCrDjS5MDGdVE0="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.a2f046f5.0_1583197036993_0.3049654339124179"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-select","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-floating-label":"0.14.0-canary.024f371a.0","@material/mwc-icon":"0.14.0-canary.024f371a.0","@material/mwc-line-ripple":"0.14.0-canary.024f371a.0","@material/mwc-menu":"0.14.0-canary.024f371a.0","@material/mwc-notched-outline":"0.14.0-canary.024f371a.0","@material/select":"=6.0.0-canary.69edc6e28.0","@material/theme":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `value` | `string` | `\"\"` | The select control's value determined by the `value` property of the currently selected list item.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HDl1DWJSwZ+XzRiH5Pg5en/Borqc9IKdUsVZ+P4+uc4dmE6pUqdmPYdZbnHPEJBOhruiPrPwCrumAIBY34/drg==","shasum":"7de08bb18d67f481bdca43bd3b742e4f30364bb1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.024f371a.0.tgz","fileCount":46,"unpackedSize":891064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbL5CRA9TVsSAnZWagAAHyUP/2d6KVbGc24lGoHiuG59\nnEgBRuHour/lxBOJ19yjBGVPACkEMuz8tnIGPhKS7lZoKPjRPNc/+2ZZblb5\nDN35RiaBWzY4n6uFo7VzQb59w8baG7w568aAivZeIkXwKPeLvFNkxWGFvU+i\nvd34Mc39Zq44YH+JPhSsGaDaQkCxFagEml3QUEA9EO2xc6ZWpXn+L5eOKwxc\nGfM19QnF94OPxMcHm1S/ABQ4qp7stAeU04J3hnuDYl9qYpVy46ec4U35OaP7\na1lSxg3UIQ50O7V3Gq5+Q65wlXjD5MVt+W11XG9JpnitOTZjjruK20/E26Pr\nIt11uHkAciK6OMAB8TzeZzq16Yye2tVvrXPP/5lJHr+o05fl/pxBj+91EKsa\nr/hwF12LbDFPrWIjNpzktGXCSnMIgW3hb8x37/DX2/T4vWyySJkl7Y90Ueps\nYoT0ujPjxMvTAjlUajhFQFLpU+V6J+CdYtliq4OgClJ5LAac6YkP29GguCg9\nVbe04T5IWJGLTShmVycl1lxhiKhHjGGrHqx+tpvY4YOy7GGpejtHBYSh+m0n\nwlyiiJCApjl3QE4OorVrsVDZOENduT/njGiVSPbqTC2MVxvRW9j07yeYoH2J\nCyU3NV4tZCZVrQKraS9z6t2708CCSFYpqp8zU6QSTEPLyUirFVyAf4zBvzLP\nmMgB\r\n=wCCT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAozpTy6kNAWjB+qSrM71GQO0kAXeDboL6b9VlmSN7I3AiEA0/FAawMW+T4yUXJoZ+bqilMokvyKIhQtUBRL/Bu5MP8="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.024f371a.0_1583198969360_0.6447667564236899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-select","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9372e4939.0","@material/floating-label":"=6.0.0-canary.9372e4939.0","@material/line-ripple":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-floating-label":"0.14.0-canary.2f164110.0","@material/mwc-icon":"0.14.0-canary.2f164110.0","@material/mwc-line-ripple":"0.14.0-canary.2f164110.0","@material/mwc-menu":"0.14.0-canary.2f164110.0","@material/mwc-notched-outline":"0.14.0-canary.2f164110.0","@material/select":"=6.0.0-canary.9372e4939.0","@material/theme":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1UMT6c6oUg/T/c1XWjqqqReiohMwDJGE6xVD8jY6UzcLF+KFCzeoRYXhNajmyGtGQK7oiQ32RqUWmpAiAHEviQ==","shasum":"32e8418801ceaa3581c761bef66ed1f6a32c4410","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.2f164110.0.tgz","fileCount":46,"unpackedSize":894931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1YCRA9TVsSAnZWagAAuAAP/2gg+q5CGxMeAZSC2zfO\nyNM+AiTOHOjy8BMAWss2D79ItzOq1Yz2NKhq3Qf8NJXLvbnyckeNMm6cnIIx\n5uq5PtMtNeEpIXF+ghEfC1ygaYgZdoOOOAqcgkYy1xH3bVfUcBiklpibPfHH\nhnof4/9eoyKpBaGwi2es4h4FxTqWfQraHB+6kNpwxVCDQKbahXwqXJDOZPWw\ndAeGJwjPtxy/ggYdSAbCqOhuFiwAQw0sVchcuq7IjVdVYNbrWf/mM/CJ9O6P\nDDtVaEM7uEFnGBJe6vgvR79DEnS6HGkvBRFGnrS56Ksr1BCBJX+mU7T66FBB\nm9HGAVTg5BLRVMof3V2EcZXpFTT4qDNENUqD329AimUHY5T2+O9lPGyla7hx\ny4eAr9XV80Xcgz0gLf0VbV4JViaIJMFcrh19gOVntqNcnYrfgfcrHPj1TjWr\nd9lcbt8vpcJnG9g2ZusUOLf5P+tDPUfjvuQiL3jz7ZxBQY0BbAVj1SE6ZgKa\nIaoZQNgUyOofyWJ3a4u4thNU/2vtRj4vkBtShWS3KfcylEvVHAn4kDIkg21Z\nLCmxfFcChkcrPfo85rbjiP+lzrJeVYbViAG+dO5HRe1LYSgYzJZFEqVLU+Lq\nOUqDa+15C768UD589NDvABwLZmaApBG+9xDcv3zWHhaYE33ROtlmFSVQWp7n\nRXW6\r\n=DZ27\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPuY+Ugh0UXotyzY1dLo1xWapeGhJe4HekPrzL8HuhxQIhAJe8GZiISuPY+Ajz/yiWZ0htdTTAjCQCC5fDNg8sWKOM"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.2f164110.0_1583271256306_0.800098903755708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-select","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9cf5e9842.0","@material/floating-label":"=6.0.0-canary.9cf5e9842.0","@material/line-ripple":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-floating-label":"0.14.0-canary.edd465cd.0","@material/mwc-icon":"0.14.0-canary.edd465cd.0","@material/mwc-line-ripple":"0.14.0-canary.edd465cd.0","@material/mwc-menu":"0.14.0-canary.edd465cd.0","@material/mwc-notched-outline":"0.14.0-canary.edd465cd.0","@material/select":"=6.0.0-canary.9cf5e9842.0","@material/theme":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rgmZpdt3wYu8SmGJNYaHLL1gFaO4bIFIZ3cmwnyFKZ4VmDz3TizF/e8z1PQ7UGFJHNsCod5l+ok/B9XG85oatw==","shasum":"20d589a4acdeb3db73ee79efe62b06a034a3f19d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.edd465cd.0.tgz","fileCount":46,"unpackedSize":894931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIiCRA9TVsSAnZWagAA/6cQAJpy9vBQxzx8+vp5rZvI\nHwnsyYtFshFzJf1w4fBIMMN0MBmLJi/TzKfSUVqIcJu91gR0uLcbGXiH/tow\nMvc4mANhZEsziVRryN6gdTZvhftvGQD8xSzRY9QGQWDPIhEOQ0dmrLbyfh8w\n0WbPFFlJS37E+pm/++ENTM/E9DIxvFtKBT5+UEsmnkWfVuA6fj1+TRvsA/Hc\nVlJXEY2zle8QbBBmKJQvlVY0muMWM5t8/kl0stGFCrV2roMDWy1ytD+RpKHg\nW3iWzymZpV7r4PFOrWpYuox0mOJxiNk1E3KuEEJlr+Hep9gXDGTzR/lrfoPH\n3mD2qvxJ284qUKNeUAkfls7duTxRuBYXZEYFKAYV5OdXXUgHGy2hP2uiq4u3\ngywAO+tDZywSyomUN/BOTthPpvyizPjpV1WDw6e+Fuv0yQZIdcDEjUsmRU9u\n9Hyj7qxYQaxFJTAA+dpngbRc4UgBhv4F7WM2NcvAyyxcA/kbK/JkCdmTwzPl\nXSJMcdRS+dbCDdspKYLIDAM8D4lz4RQ8CL5Sa4jeYTNrLygOZcn5Xv8TnOiv\n2g+J6IRaq1XruLzgdEbSsLmBo6p45wRdcR/s4lmgXUckPvoI/gtYxD2jf8bx\n4CPZJZHqq856iFi0zm3DfLj0K3igwfJ/SBjsAjEy9QoOy5Aw7xQOWuHHXY9g\nCPso\r\n=dHFH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTF8zQpROjiV5/2sC6ImolxccO6641MtOxg2/KEYyNxgIhAIlDeSbyguA2cp7iu7OkFfJD7/PU+XIwVWKZeEVpeEG4"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.edd465cd.0_1583280673775_0.46727068790805726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-select","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9cf5e9842.0","@material/floating-label":"=6.0.0-canary.9cf5e9842.0","@material/line-ripple":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-floating-label":"0.14.0-canary.2b02d017.0","@material/mwc-icon":"0.14.0-canary.2b02d017.0","@material/mwc-line-ripple":"0.14.0-canary.2b02d017.0","@material/mwc-menu":"0.14.0-canary.2b02d017.0","@material/mwc-notched-outline":"0.14.0-canary.2b02d017.0","@material/select":"=6.0.0-canary.9cf5e9842.0","@material/theme":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6MapprYEACEqTGvrGdBNGHkCoVDCy2cHbVVH/Wy8cH3z73zdfoJT2SXIX6CgpkIf31UhFvVrVbnh1AO3zSdeUg==","shasum":"f0938a90b5a41f5e7253b8b0288fc5daa976b324","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.2b02d017.0.tgz","fileCount":46,"unpackedSize":894931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1gCRA9TVsSAnZWagAARaAP/0o/XAX6Kf0qGheP+VwI\nO0Ug7ddP6DaHImbTnujVJM1/d2N/uZEOrV6bc415g3SGK2w9l/xoRSnKTi07\nbl2BY2/uLHKs1DQPBEYShj0p5M+NTl7XN1zG1J4pS0U7dlNQMhrXdB0HrUYe\noDuvTe/IzlPKyXrmfwSQnbRcTete07PF9JCpNAE0LTzD24AUvHo5MFZTzewO\n4X0S1LAD/rYVccz4XWgSX6/ZYN+0mUxjrSnX2MsF1rWjwvtzBfj4ZOFzICgg\nwllwtmKoMqnT96kmKez95i/5qUoZFrpfILtEMGs9m31HCWh/Ltqf6XuZAmrf\nF+VZLfS11kfSqtB/2nDKAWHjYGrrmdpadb2ywDqACNPyj+UMyEVx4j2AyUpK\nKO4RgvcYhycgnZ4bMC7MjPzwMZZavO8J6EGpmzNieL8sDdjwHMPYzqyTFVn+\niocx5ZDeAovAQqPvl+AqFBSLQwEucdOR/v4r7TbPE1sZIBDdfUSJEc7E/xYJ\nYs8EVeswRMX1x1hyouJ5ToZLYYt0odlByq42KMS7554Am4pKVXJqlJAoSMTa\nUnO89iyj+Wk9IsFfu0S3hhlrCJlKpn6p4ImfnzWhWl/aAZXUCibnb21RMzJg\nsuWcTI9jweAl70qaRTdA+/atb8BfFNPbnYsZhkckaNJlpVheNlRBkjIirre2\niBnP\r\n=5ay6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVHrXk87L+FPqOlMM7YBZNxHskxQLI/aEKK/Ak2D/5hQIhAJ/3I8g+0NWqsLipVayLvlmDikRnfBeyQ/P/Zxpxsa1r"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.2b02d017.0_1583353184098_0.2115353257033592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-select","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.3657f8863.0","@material/floating-label":"=6.0.0-canary.3657f8863.0","@material/line-ripple":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-floating-label":"0.14.0-canary.cbdfe453.0","@material/mwc-icon":"0.14.0-canary.cbdfe453.0","@material/mwc-line-ripple":"0.14.0-canary.cbdfe453.0","@material/mwc-menu":"0.14.0-canary.cbdfe453.0","@material/mwc-notched-outline":"0.14.0-canary.cbdfe453.0","@material/select":"=6.0.0-canary.3657f8863.0","@material/theme":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NQX1X0geA8fgWOdg4c/hMS5eXrzlH4GIG7Qtpn/ddncn/wBolmU/WpxAJA6SwE/6IeqiNys+zdx+NZalivAJpw==","shasum":"a54d5a5034d1ba0017b9abc494fb8e8b25bfa8d6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.cbdfe453.0.tgz","fileCount":46,"unpackedSize":894931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFjCRA9TVsSAnZWagAAiQoQAKOawKH3jO8TuMSFeO9y\ntikGf/axibD73HbSNWvhZhitDKB+ZAqRegXcsjrUEU3lqOIxqhtPyisYWLzH\nSm1SbhW0ytEm68MfrGOxNJ5WzCIVjGalhWYMLH2ex8xGZCrq7vqOBVW3skYo\n1Tesa3H9MJbMEPdjP6Tz8vHGBISTJNnjlDyGXNG6ORvcoqn7i3btNsMaupt7\n9MCJ7Qawe9NsJbmBYu+bFFlArFv+mCwRkDBDZCJFta6OiiLRBt9cIOkQZElf\nfp0RFOD8DaUWJrMQTG50N2uatF+7Iil5aDE0pXhamBIYf6WUEyz9y0sWZABX\nlE6NCGWsbLiGQC3NG9IAP4T4u6OJokTexA6fi9Q+XD2GgQg/hea/FijXxVbH\n+jo5nZBafijzPy2wsI3ZlHFYG8XyKUqOlm0+CH7jVsl0PS3E3hlkV2PhCGoA\nQcqiyD9PFbP5DP7EKhXITCSSapzoyoR4BKVnrxQjz6hXxB3k26cW/CVw6GsK\nI6PqVOYyAkgS5mqovDNRy6LZBx7z8zoLLBRmZIqoZF4A40l8GuQYYA+R5tkp\nYmdgT2om/W8UITIbXrVN5Vk2lMqJqqKYvaJh2msynq9ifu/g/ZAwtNAdvd8Z\nz00sur0exIa06PEahsOz7mG60AcZ6j1dW/HBZ2hiiT/IcNk+HpTmCUbKvlPE\nG4W4\r\n=Gbv/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFu2R6YVUanCRzwW5sAsVEx1L1Q2YO6ZH3HxSHkAkey4AiEAkKXAgLlkTcXzXnTR8ufxpEuq4jdCQgOKy7FxUPqLLv0="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.cbdfe453.0_1583358306957_0.21551393616213077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-select","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.17b9699c4.0","@material/floating-label":"=6.0.0-canary.17b9699c4.0","@material/line-ripple":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-floating-label":"0.14.0-canary.02aa8a98.0","@material/mwc-icon":"0.14.0-canary.02aa8a98.0","@material/mwc-line-ripple":"0.14.0-canary.02aa8a98.0","@material/mwc-menu":"0.14.0-canary.02aa8a98.0","@material/mwc-notched-outline":"0.14.0-canary.02aa8a98.0","@material/select":"=6.0.0-canary.17b9699c4.0","@material/theme":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Ov5qEeWHtLggeWwKkBG/2nyyO1W193fFO5D1TIVXuc0aHm85yT23bDCxWuC2q6izvH9jEDTaKGpk6IGIvEYtuQ==","shasum":"e18d7121e5b5f56c50db987afc3c31236bdaa35c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.02aa8a98.0.tgz","fileCount":46,"unpackedSize":893650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtSECRA9TVsSAnZWagAAUXsQAJVeYNbq/uDSeBKL4SoE\n/kSjJTf69f+mqVpCgbmcFibI5Uz1rxKuuBjup9dDGI8OpP0QtyfYQWiWEx/X\n890bxWmyzKNL5fBFoxgmix11+rPab7RVYo+okQpFZMs9q7ns+EyDvgHPQFUT\nwzE3DsguINaz62Ab2dMyZYL5lV9Ree1UyQniWTNvc1vTsOATxX1a06sPQ7hq\nW9B58IBAgd/+51JVm9j3ggshhSXtIcRu8YYttnOO/7TcWVK8mKXhebjcePJ1\n/Wkngyf3lniuG09jt9MOAFWniN5PjeeVT2gR3OydBCGp7HbTmUh5eXrpcQSL\nnrGJG9NibxvHyBnzRoQ5MsiXl+o1VB5uIS5VIFy70l94I8p8zdpNndNyIGv7\n2MSYxxZWMUXrEV4KpWC2658Vf9nMMvZjnNDOi2IkFizfagqlTtVSCR6R8Gtr\noIDSN9qMAB9sY4F4dYLx3U9pQ1zWwXPYg8t2Fzj+STf4UPealvh+Dkd4S/qn\n2yq6GV19ceQvaXSUUvjvJ63mjkWfmOJAADUv4UzyhkY004POv0jUMV9hyo0l\nBgqbf9pfROV00Hd+90EWC/ZKUiaK2u4r0ek/eQHgE4uHBTbExeTiwoCPfSzf\nAokADCVWKnu4KJMdSlcATRPvev2F+/huy44TIpew6s7+ix0ivDeIGGnHQ8fM\n9LN2\r\n=MiM4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAY1gF4MK0bYxrFx5K7ATUr9blBz7fC8iXWW5ft+ijmAIgSHtsg7BmvDe6KQU39fAOib9YNbLSJDPcGhPbvaeCskM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.02aa8a98.0_1583535235819_0.4291886658180706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-select","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.17b9699c4.0","@material/floating-label":"=6.0.0-canary.17b9699c4.0","@material/line-ripple":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-floating-label":"0.14.0-canary.7cd5aad6.0","@material/mwc-icon":"0.14.0-canary.7cd5aad6.0","@material/mwc-line-ripple":"0.14.0-canary.7cd5aad6.0","@material/mwc-menu":"0.14.0-canary.7cd5aad6.0","@material/mwc-notched-outline":"0.14.0-canary.7cd5aad6.0","@material/select":"=6.0.0-canary.17b9699c4.0","@material/theme":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CcywhUHv+28GVv6GJFUJHghoI3JPNRzxaxqu/gXBHLxRbMyjHV6VGwrlf78Xkn6rU36zgC1/pPYetI++sMoJBw==","shasum":"0eca5b04d532cde4a132585eab243b74b8f8cce6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.7cd5aad6.0.tgz","fileCount":46,"unpackedSize":893650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs9NCRA9TVsSAnZWagAAyhMP/1d1zbE6aBbZW7dOhnhA\nTTpReAij9KrKQDdHdT5Cuac0KRBcpH17heT1q+yol+2aShAK2Tcm/6t4/x6u\nrTC4vrdPxLDOls+IFsjidj4q2F/KovSgPks7sYSta/4EhprGh6N1czbXK5gc\nU3qDZSFE1oT5PMmzPt7idHxOzt1Cue5TkJdVNy8079cTnET15UMvIcJVw5vA\n/ecmqEqujBQLx2Lpn9YCVuCq9CZHRWXMi8PKpGbMmqYkbbg7Umxnt+OBbq6+\nOcwIYyDHrnT20tE7gfqMwRVCCkioylWwe9W5MuJfbMCNvUE2wPYvlMdglcjp\npYVLFmoQIMA91gBjo6UPOfBFBnMyH9zxuTmuekWwvvesTM7UcGdPw4Jo90Xx\nzBDhFccbWd3F0hEOTHbdyRgek51HgnTU5noOkijJF6Hj22vMaNFQweJGG0nx\nYT7OU41JiyiuhKNCVAWkHHtrPTVpv4uENQNMTSCc7csVcMIlptt4BYHgvlGY\nAZhkYuDS/IWyJ6VD6MUeIJYU8fLBmC2s3xyZSqKnTMg2BUOmF28fLvDtGCrl\nqrmGIjjDytu+6CUcChgJ1HTC0hSktteF4QfIXVdwl3rk7ePDk4ga6qCxIJrH\n91ic68toQZL5I+a6EgT09LkuqEefqzDOjNsHs4mJLZxUlKHMLm6vLCEjwMQX\nTDsY\r\n=Fzq8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR3zQJGhP07H9M+zvA2XLpMM6cogn2Iu1OJCU3FH5GwQIhANAMADPNDZ4xIJg8WW/dLzYzBWr0Jx7hfCUSDNpET0+R"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.7cd5aad6.0_1583796044677_0.5599155013344004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-select","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bd33cb56b.0","@material/floating-label":"=6.0.0-canary.bd33cb56b.0","@material/line-ripple":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-floating-label":"0.14.0-canary.3a79dfa6.0","@material/mwc-icon":"0.14.0-canary.3a79dfa6.0","@material/mwc-line-ripple":"0.14.0-canary.3a79dfa6.0","@material/mwc-menu":"0.14.0-canary.3a79dfa6.0","@material/mwc-notched-outline":"0.14.0-canary.3a79dfa6.0","@material/select":"=6.0.0-canary.bd33cb56b.0","@material/theme":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6Yv+MZQEv+rAb2qf7PipVASlLWfTH2OxXErj22OddAjKKnjoP4xpeztEM5zctQB9maZd3Hoj5/tdXZVpCAwulw==","shasum":"1484469f21d5b530c30ac570e9ffeae1936f0df2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.3a79dfa6.0.tgz","fileCount":46,"unpackedSize":893650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHvCRA9TVsSAnZWagAAeW0P/AiYk/ECaTxMKMpeaWnL\nfSlOEKKXshUE/f1O6lE3jYNUXa+K+mKB0UwJQw90XMQj/cTj6VstcjOxY1Ba\nLcISjrs4R8OaxXeueXOAe9sXYwZmiGHwtpEbJpJLsgH0NS4u7wqZV8bqrOck\nsrXH88zhByZVNme2qTzWAkfOc58nmamHNT2r5FvoZgXE2mguiQD1hdh6tl6f\n+bqaNwjetJcK+6V/uaNz2ZKFxkniPv8czzn18Arw6cX9lzVC/BSn4ZYd9+vG\ny8dmkfqf+9Vwhfh76WfKVVLxuSwpJCVaplQS0qbnqU0t+qT1GifNjnJTVREf\nNoU1C7mtD0E84GG9/9FMavYMmCgjjPVJzTpOy7yuvG8Ws0WMzsBl+00YlYOR\nVGdTwmjGhgnN+pjzZbyKEJR/uvmHNJdwsPmYGxI46KkMI0+iUWioaJXZWQxX\nF/NEjLskJWf3OHKcjbbIViDiTPzWWuGUcLAfrv4cnm4eTrmujnonAgETc2aF\nptFA05ABy6e6qmdMoJrTR81BQxr9btshx4RLNZDwxXeREJXQkMR1/7jb/l79\niy6uXiTLzYYzETj0j0d7HZVIfmW+CJiG6q4+HEZvgnwanB2SmR3xwQrFL0SG\nKUu/hrSjprqLb1Dm8jst7hEkMEbBGbFxtRwB3lgcIpxUHZdtpZte42fOpa8i\nLB8W\r\n=EWzq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaZrtCsJ2ag3uQwX02NYGEzrjQn8xi9hUh5XlBrIpJ0AIhANFY28YgMx4iTgxc8moeiTIvN95PsleYFHMf7fq9wFSJ"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.3a79dfa6.0_1583809006539_0.6566920180676674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-select","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bd33cb56b.0","@material/floating-label":"=6.0.0-canary.bd33cb56b.0","@material/line-ripple":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-floating-label":"0.14.0-canary.22e0f5c9.0","@material/mwc-icon":"0.14.0-canary.22e0f5c9.0","@material/mwc-line-ripple":"0.14.0-canary.22e0f5c9.0","@material/mwc-menu":"0.14.0-canary.22e0f5c9.0","@material/mwc-notched-outline":"0.14.0-canary.22e0f5c9.0","@material/select":"=6.0.0-canary.bd33cb56b.0","@material/theme":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3kBDCnEI7BYYURlmJNqNRzjErRBfob+B7OAsyT884XOaf6tAjH3mslgteoN73jVbw7cxwkwlzP53oK9ygPKH6A==","shasum":"816bf57ee2b8527a119ca350365a42be037ab0fd","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.22e0f5c9.0.tgz","fileCount":46,"unpackedSize":893650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLfCRA9TVsSAnZWagAAGOAQAJOb5fcEwq5DhU2A3dae\n6BKpekz4ltLFEw/cimAuLRHPbj9aLqkG14U9CfSldSNw/dyy+ItMD1qcQod2\nZW2YlFobh15k90fPcSfu9XSVtySdU+s1eL2fQgdECbLf8iuqirB5MjXjb2iQ\n5Q6s7rwsqHwG0Ky8DHfrdPFdiwEByVnTj51STmA/6TmNAzVlAc6PhsID3bmZ\nZDK2hlBWE+/wgbopn3zkBf94J/zuA4bIgoBmkfsbpNihXHy+ePkMYTU6dbHK\nNvgkoi1hj0GX9s2T367ijsKaHo3Aj8yua3r9yEDLXfgkaTedaZpNZb19xUqB\nuljPWZnOAnwv5kg23ImJBXOz4qf6q4gQoT7sPnZKwMPa8AHB5AjvgEgVZZai\n00TSYIrsV5hCpoQUmPnmgNR9HWPMEM3ADUGtdPW85ERet2lG7dzNsnZVZdE5\nKciXwt16AoOmOsQs0QRiO98smYkRWn9CUmqaoniRiKuammHBbdAMndiAOLX7\n9kq7gIJaOD3imuiluepQE7Ec/oK6ZboNhFDw2b5OrEr0F/ApO8/lkuGtq4rH\nPNcCGcze1xytafpsR2RuTrwye8/pMndgHzxYuZMHCl6JAySUKgW5WaecSxCL\n9dUB0pA5IFzXx08MzGC1Z2utDbrFz0KcIdnxRfrwXtt6LLrcX59kXWCBXjzn\nNrMG\r\n=HBNM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSFkujn9tgz4qiOvsRPL76vUMnp+oLVjTf74yAcxfGsAiBCePRPOcnY4gaXDUUJzhpKOygzWHeN2X4lHhXikQWvaQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.22e0f5c9.0_1583809246760_0.02672868101285042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-select","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.26c049afa.0","@material/floating-label":"=6.0.0-canary.26c049afa.0","@material/line-ripple":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-floating-label":"0.14.0-canary.f23a1d1b.0","@material/mwc-icon":"0.14.0-canary.f23a1d1b.0","@material/mwc-line-ripple":"0.14.0-canary.f23a1d1b.0","@material/mwc-menu":"0.14.0-canary.f23a1d1b.0","@material/mwc-notched-outline":"0.14.0-canary.f23a1d1b.0","@material/select":"=6.0.0-canary.26c049afa.0","@material/theme":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aBUxKbwNiL1G+dozk9rVepUhyra1U6i25Y35rnlBTNLP8sa1W3iJTmf7MMFJalnPg4z8jebiyWF3jbjktSL9Cw==","shasum":"131843c8d672e08a92e34892e0f6201fdc09d0e7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.f23a1d1b.0.tgz","fileCount":46,"unpackedSize":893650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8gCRA9TVsSAnZWagAAjaQP/3SY3AP/G76vmj/uOCJ4\nZi4M+o4/EoEOhyIjRhbZjVc3fsGrG8L+x/SVDTmsJUEKVFeJj3ROf3MCAIMp\nqw8x9hmWqvFJNX6ECsBMMbZ0CgO3Ro6NUSinaCTu8loTgodoFcQm0TQ0rHCv\ncZxOpIbMRDfieUKQrzrSbkrY+oj+yLkJklvez2cLUwNu314H0XSkOlJ7SOYN\nydSPZYTVauXR7XDcneWh8n4nG3mdqs32bNLcQ9rZ0Rxv0X84sb4sk/mibGma\nRh3O8V/Hwb4xeTRHQR/9WTg3Bw7+kdjuG1k301hxrCNeXRuAtAGbAO+cCwri\n7aniv7HL3wx66s/+1uAXRMNOILkGZJBBXLsSlX+sKeHONjn1Q78XMStt4o8u\nmf8m5+WZ1COKz/fqzax+tt+nq+NF5xzOJ21oO0e2p1TOwbx4ZBpL7IVEi/Ci\nhRmOfphHkJl3esfjL76RI+0GrYRFBdAkftjn3lRQzPgRALMTucXMlGyD2gFc\naRPqXptTngOrnbl66m8od9OQH0recpNsA3RkkaWADB/YjZuNIcorTAjDW6Yg\np4HXQA9GAYdohKYxy1A8tVhtTq4SWYhSItJw6ENtLGVqaZsRjUHzkcdSnIbM\npKhLMY2aD9RzMYvgDXzU1MQmCuQB2Kr+6SH/mgnJM9234LGMyg0kvExZEI+d\nf+Go\r\n=tl4q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZHXCLk17hpVTCoAARZFa3lIKUx0LTAvM9cbT5oCGaqAiA8WpyWd4+XbJZKZiXBWvZDr63Fo6cO9lYdlm9geP4y8A=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.f23a1d1b.0_1583873823650_0.4360110082832285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-select","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.26c049afa.0","@material/floating-label":"=6.0.0-canary.26c049afa.0","@material/line-ripple":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-floating-label":"0.14.0-canary.34b2d69a.0","@material/mwc-icon":"0.14.0-canary.34b2d69a.0","@material/mwc-line-ripple":"0.14.0-canary.34b2d69a.0","@material/mwc-menu":"0.14.0-canary.34b2d69a.0","@material/mwc-notched-outline":"0.14.0-canary.34b2d69a.0","@material/select":"=6.0.0-canary.26c049afa.0","@material/theme":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-U50zqmUW1vDeeC0bq+OnnNp+AT9iLajJPrLNKfCyqgYk70S7y8FD+xVxXmhJtTkjaFekoSicdgss7qaUV58AHQ==","shasum":"adc14f75eb1bcad4048c345ed4be73728da8cb11","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.34b2d69a.0.tgz","fileCount":46,"unpackedSize":893650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANlCRA9TVsSAnZWagAAyRkP/13GdN/YGmCPUs+4tzpG\nVL8iojZLYIGwmPiGxgUjs3zQzHKdpou7Pcmz6ehXluqju6Z5idIH+z5u7ULb\n49yUMYw+d8251hEdouAoyoWo5XUnXEjxVkFBq+QpqBuBnqpfgCZ1fVem2AT8\njQl+U/17RjMcuILNDt9yfZ3UVdq4XnLRy8oYKowC+INqrmIw6UW5cLpF8jHj\nvDSJ+WA0TRZxhg0sD7gbZUJoQyktgkQ2ZETCXigr3jcWCPOc3bUnrhCENZoO\n9Q1gry+QyuLI0ZxQKYmk/zHhzkX1DFjaKRSD1asKIO3wUtIqUvrVHvwctPm0\nAovKD8p6IgMU373CgqJPWs+l1Zp4Dp2AwYjROgkCaTHYKW3Yr8hSvj5OUjMD\nFj9c7AcB2i6jEHczhaNVCWNwzEzxYu5JLxKdYenRi8jFotp4u50tJHDL6HeS\nWZ30sNP6s4LmegmO5afVo1aObOujmq/aHAHX+jWvuIsHkFQBIG07PH85o6RV\na6nzIfVLbynl2e59il36FcmB/k+lStm0CSUWDzFEqub2yFKiHi2rSaZxB8Hv\nTFuuSXGdpLmOBPSi/OiIBmFuavSH4VO2CEGtN8J9Qu6lIze4MjPvhBlyf5yj\n8a92NZo6OSh+KEKMoOZ+XA4R09C2kWncMv7n95yK26xMyVMac+FQlrLwmKOO\npA3M\r\n=RvPc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAzb0lcc+tHzp4Df6QeKCkm3PnWv3EMLUKSZQA67NutwAiEAwD47wCHSgrymfH8kdGznKtnGdDqEKzsAwhoa4vU3XWA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.34b2d69a.0_1583874916846_0.3647113713841237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-select","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1db5c9fc8.0","@material/floating-label":"=6.0.0-canary.1db5c9fc8.0","@material/line-ripple":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-floating-label":"0.14.0-canary.dc04abe1.0","@material/mwc-icon":"0.14.0-canary.dc04abe1.0","@material/mwc-line-ripple":"0.14.0-canary.dc04abe1.0","@material/mwc-menu":"0.14.0-canary.dc04abe1.0","@material/mwc-notched-outline":"0.14.0-canary.dc04abe1.0","@material/select":"=6.0.0-canary.1db5c9fc8.0","@material/theme":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-35ChxsuhdMISo/ZQV1z/fZzJ7gEyygHldVIxNZrlkzXPluW4tJwyP/7kC/xXoizBWtkUoIyoVhdX22yes4f2Ww==","shasum":"37a3b4c34140353944e80499020c2103343f0126","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.dc04abe1.0.tgz","fileCount":46,"unpackedSize":893650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA6LCRA9TVsSAnZWagAA7ScP/1Xi8/YipcB1T7LtKOB1\nrpS+cHksfsXrwn25P4txB7T9yDkAJN/CCxAfBItIYJO7nnywh+09erh7EiBl\nfjTv6jFbE7PeOFTrDsL7Ey1P9/oFMXZMc4e4iw6Z3CawxCsPXuw0onFYU9pW\nQS76WiQe9KZktgFyXldcUIIu16Lgmn5rWGH1dNTv9zsjJsNsKNSJ+IWZ43G3\nbKfbQ5ZTdBZjO0PqUrEfe45kiaYr/hyfc25RRE1gTgfzpSidTYGrDOoEozIM\nPGcgpo8XbuVO+jbKEDyIiue3OXGfxmhuPuNVgf3so7+Bh6ZzRG6tD00nNeuz\n2bhGwSOeRqlviYnFuK4F+OvgKnjORxVw1GdnaW8HK5SqmAO9zdgRx2sv0Pc2\nK25yZAD/UukwLrQwPlN/toKHo1Brp28AuuGn8wfNkE8Cy2vdoHSpBJjM9CLb\ndfY9gSYJHwzOzCFVLqDxbHe1NHe8w6L04ACzOFiKtDm0CMPrm4dNowY5+E7t\nXUjGpYeUMbGMEq2PucmNNhEcNAFApO8UTqLbiqA374zlzc/VGt5quLtKqvMD\nMUWUQFhg9XdvrICFaYqEI5krUXbTP5LKf7vhPVnYFWXLnplmyXgFEVu9/+g4\nYUfewQaOHsDub8VAMmW4C7yWOR5XZrWYY/ezlXbtFZn0XcySkRSq1m+TxM6Z\nCqQ8\r\n=2S+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdHx5fKGMivZCvVtoApzTSpUHJbXRzcV8SSzOk4+G+bAiBdCUT1QnzruWmfPklTASocJuqGmdeFpwbRRHD/SFNB4w=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.dc04abe1.0_1583877770835_0.9258146922962256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-select","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/floating-label":"=6.0.0-canary.1ae8130ce.0","@material/line-ripple":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-floating-label":"0.14.0-canary.04ccbc88.0","@material/mwc-icon":"0.14.0-canary.04ccbc88.0","@material/mwc-line-ripple":"0.14.0-canary.04ccbc88.0","@material/mwc-menu":"0.14.0-canary.04ccbc88.0","@material/mwc-notched-outline":"0.14.0-canary.04ccbc88.0","@material/select":"=6.0.0-canary.1ae8130ce.0","@material/theme":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lTJ8J3s7Q3vipVkoeqO9SvILKJPqpVvIocoFKAae+DUiItYUKxDn1qYXpx/DkHuH5HLpWgbGtUxoXA2q5DfsUA==","shasum":"0bdc72921078de9f8ff150338455ece79a35b8ae","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.04ccbc88.0.tgz","fileCount":46,"unpackedSize":893650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDJKCRA9TVsSAnZWagAAKvUP/jCoVxJ4BdxEA+oPPpAO\nuFq0JofVnKHA3El0Jx0epCWKWGRyDoibEOb7QlPu7q7GIP9OJyTY8+cGhpF/\nLUv76O1v8t9ci9tzcEZ3iJyV1P9A86gNKofr/guj6L+LL5DJV3DGkSE7cUaQ\n/1O4RhZvBUbHjN0Hb2HdENa99l8IMLAAvFstD1l/3GiVvVEibmyHq4JghxRc\noyZe7cM1rjWSKZ3xAbt/Mr9S/Xj1buZ4rfylhA6MMJKDHCrhaS4r11dPfo/h\nWokD4P2Y18Z0ybrKGvdCeAPK+dZEH5lv95OxCB/vo21Zo/WpLtwnazpih6HZ\nI1VYhIhS4dz7rnhf3peryz9LApI/oAF/HrVHILRlpbtx+0dYxdzUo6jbPC4X\nQzbp18A59sLUoS1sAOgX1aPivmA+wmehkdHd4UFEos/iprd8oLzJadcsMbNi\nL01Fq0Ja79uHJphTgeZoqPfdQ2S3p2faw9+YpvepudusyxcD6FRvJ+LyjqQk\ngfn6A0P3hMb8o7Pf13EIRuZtprx0w0OoF9YtPwk0FVArOpMzEmHL3f81WEnb\nOHcR4TAZbqpO2XP2vYRK26eu6KrBlM5KCU/VxBqhgB8v0yLcRiuSMqek4WHJ\nSXb85mTjiylKrF/hzl90o390Gt6GdbzLzlPGrmEgIAITje1pmEm8PvnaBUCL\n04wI\r\n=ikVl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdH6xvGH0lVXXaYTPoLIYLrvD1z2r4DH0mykmlNcBSbgIhAOV3DuZlz2mnjKRMG6zFzkM+nOOiKhGCixSFEXPp7Z7H"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.04ccbc88.0_1583886922506_0.38504673948317847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-select","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/floating-label":"=6.0.0-canary.1ae8130ce.0","@material/line-ripple":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-floating-label":"0.14.0-canary.55338c25.0","@material/mwc-icon":"0.14.0-canary.55338c25.0","@material/mwc-line-ripple":"0.14.0-canary.55338c25.0","@material/mwc-menu":"0.14.0-canary.55338c25.0","@material/mwc-notched-outline":"0.14.0-canary.55338c25.0","@material/select":"=6.0.0-canary.1ae8130ce.0","@material/theme":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-s2ILc6T1GERCx3EjKj8XrHAwUQS+YeOt52kuRVpDAQJGkNOtzpsGGhaUNj09aXh8FuBqSmTkSRec+3Exvian1w==","shasum":"f3c45b1f43744fccba8245d06eaf8d9ae184c8b6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.55338c25.0.tgz","fileCount":46,"unpackedSize":893650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXiCRA9TVsSAnZWagAAahIQAJSZIW9YxXSiG3S0zJwI\nZIzaZ1fbNzNPsx6kOCwf0JQ0ENZFECR/+JkOrny8zcUzfSlbXYt31aiT6oPd\nPnqt6riDcBGHngVULnuZe0oqSzgIpSYfFdotC/XlhxWte36mCgw2qD6fM77C\noDUeSHUmMjXQQkuAZoaj/cr/iZOAMoRqmyEDw2cYwCn8MlInUc6607tQGOZL\nAFfXRrnnz0IhTk2tAck7NP4MdWfX0tWQTgEvp0JjOXNx/L3atXsFGiVH7Sc7\nGNscl290bZSuJFgsOaHwfSWP70rj1JFtObYdOGcMH0tFfFUhqlTEi9CX8Tpf\n0UEVWbeDmlqtdc47qg+Idu2AlfeSqCBRrlSoiQtPyCao6z38cigCIJhwFuwC\njmqAvOr779PHYmGMuL74UkYiKn2qxu/wQXEBryldLnOLRFdNvo11vsh4FNOc\nWByI7oe95MmXPj0WwsUuZRPKeZsEA+uSUNrldUPwB1tQk1nC75YQxifpRdKP\nQBrJnwOl6FCz7F1CtOFhcFTbq+7b7qYdQA6v4OafqHJBK/lDeUjX/Ry3rfuG\n2a1yzHAUjXX1cxP0ZJA4fF2sTaZcikZiLqGOlZlh0oakDC/Ka+By2EGu+HZw\nAGPKlyZMmzsn+zVfkrbQfh48LqnLlp34c7oVR4vJDIJjmPP6bkzOV9wXMU/V\ne2f4\r\n=vP4X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLpAVFCHfxL8X9pT0nQRtAYR1KVcSgLTM8UUp2FEt3YQIhALKLezlxzOqSAoyWKkvVDY2/cOIK7niE8eFB7Fkcezlo"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.55338c25.0_1583908321608_0.6107705762940794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-select","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/floating-label":"=6.0.0-canary.1ae8130ce.0","@material/line-ripple":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-floating-label":"0.14.0-canary.b7e388f3.0","@material/mwc-icon":"0.14.0-canary.b7e388f3.0","@material/mwc-line-ripple":"0.14.0-canary.b7e388f3.0","@material/mwc-menu":"0.14.0-canary.b7e388f3.0","@material/mwc-notched-outline":"0.14.0-canary.b7e388f3.0","@material/select":"=6.0.0-canary.1ae8130ce.0","@material/theme":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-GG/B/nb/wU/vQWPU3s5W+quu03ylwPRw5UdHZguuhs0xx/tNUkRSoRkCO50W85r+cKzO8+JHHlHiikWFU0h4Nw==","shasum":"67a7acdad229694700a3bbce9452460506e29123","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.b7e388f3.0.tgz","fileCount":46,"unpackedSize":894217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUf/CRA9TVsSAnZWagAA0eUP/inxWuE2KiipHbbmH8UU\nfbROsnRqWgG9fonbZolwRhPDJkWcaGuwa0yyU76mO5phVo0qtpckDyeMcS+b\nHGxDpY3WxVtfclfgI9Hs1r9pnJLCmcTBwFt74VlBhad6hT2WNI+pXafbI9Uh\nAMiS2DC854DkZpryxGlg/bLVPtpeVmX7U5iG9xds8RD+bseDwITqa1+fIrIJ\ner9Bu3dJuLID2Eq1bl5/se0xjYJIEOwFFMn8hE5sTkm9vu8sk65ClHmC2QI4\nkph/Zh2gSJOCpXu+wBlLhPJsO1STjHR9IX/xDsZBlw7/PvV6kmxPUMhIXv6x\nzUqF51lI/urTuKuAnYhwvobihZ5xjVzqdNbm5qnRZRKk6hsqBlzNWA0vhbaJ\noka2bNeSLB+ZlsTYd0l8ZYH3qJrMvVrOtFplLG40WFZ5zk26xlpdeEp4oilZ\nveVpgxFDaMshvIn+aWvPxa0CZ2OOqTcxgXyGA+tYluooDJkp+SFCtBvJM7Kn\nlqTaHt4HVZFVwjG04Lo/wQ5h1xU0pBct95/brusFjVlqJl+Lr34mIXtnB6mt\n9RgGu3HFwlMH13x8g0dh6AOURwiXzPaW+LEF4vSzeZA19yoHpJM+6H5zEhu+\n3tXa4Hmjoj4zjnLPzKrrdkGlAeW97OwkWA/3m48jX89U6ZuJIHTa/dlsh1fq\n43Bv\r\n=h74K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfXAANsyrV58fhjYJmx8X8FUYbRLM/sbgeXoQCaPLBHAiBbDjBgLHpwWMrpiryXcCclCOSLVdY51UeFyxuo98KUMA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.b7e388f3.0_1583958015304_0.09060405282516948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-select","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/floating-label":"=6.0.0-canary.1ae8130ce.0","@material/line-ripple":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-floating-label":"0.14.0-canary.b3211481.0","@material/mwc-icon":"0.14.0-canary.b3211481.0","@material/mwc-line-ripple":"0.14.0-canary.b3211481.0","@material/mwc-menu":"0.14.0-canary.b3211481.0","@material/mwc-notched-outline":"0.14.0-canary.b3211481.0","@material/select":"=6.0.0-canary.1ae8130ce.0","@material/theme":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RfMgJpxjhT6e1ZEUyOXocqjoyHGgFwlGdijbh3/7lMM88QU1lgQ8Qb9eHU2wBYRree8tdI8D8T3lMtTyMg+lzA==","shasum":"41063ebb69e3bef744337121898d46a732feb8cc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.b3211481.0.tgz","fileCount":46,"unpackedSize":895165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUj8CRA9TVsSAnZWagAALCQQAIsVgMJta7usmRULZSBi\nRurpWR6kygTGtUDyFF9OUR0h/oDz8MrruoIqJcsZOMGcnPqYjMy7xrkGxljh\n+q9U8OOxX999uP6u12JS022l2a3uIukuqv3tR3Tn06vu4tetrGlrFIasLnLE\nuNlIdoD+uUIgUtGu2Sfq9ougFBJpxtc07qrfrlDBv/p9+ob1s0EVZYJP0F4j\nmoje7N4XQQLdzQl9HzelrvYg5DnzkqWeZTY9rtgGyuNrRG24bb6pjzr/u/nU\nwx7rlGxiukvuHnI2wqubskUShulnoC3Z18u55szxoDvYu63cZgRnq4A6wBFl\n18piOgTa2NHZX74XpWwkmXif0fC6gnHBsGmO6JZg5sU4CgK4+zAslTV/1g5I\nKsLVDndI9gPfp5hALfUahpGgq5iQJdQtHxVkIazsOQTnN2ynB0krTRcpYNTg\nPgt6Z516HX/tiOuetbkl1IbWh7G4HVDV463IUcKHjC3EFBjsa7J8QKX4jJXn\nkpmk493I17Skp75ngDpPV+P3FFzH9V10ER/grAYiOwJflm5pvJTYjVRAb5Dl\nlByKG7/mv23brtyYBdL3uNMSV5TYioRc3TJY9yfg+/5Cgw6dkex0i1Dn5GhR\nBkSxq3W86grrMrArzIwvEfl4Cq+dzGyRcgiDhdw1Y6SRTKZlekT+w6XKtani\nMJZD\r\n=Br2H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvybsOgII2Lv00fQnk0gOOZgH9rGethEuH5TBqZYavzAiA9tUNVcJuBBMMJ8aWWi9NBbwcqbqRdslT0xvf5bBUvUQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.b3211481.0_1583958267717_0.5257412695785908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-select","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.d5808057f.0","@material/floating-label":"=6.0.0-canary.d5808057f.0","@material/line-ripple":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-floating-label":"0.14.0-canary.0b5c7f23.0","@material/mwc-icon":"0.14.0-canary.0b5c7f23.0","@material/mwc-line-ripple":"0.14.0-canary.0b5c7f23.0","@material/mwc-menu":"0.14.0-canary.0b5c7f23.0","@material/mwc-notched-outline":"0.14.0-canary.0b5c7f23.0","@material/select":"=6.0.0-canary.d5808057f.0","@material/theme":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PlL8wkOyYTrjgKQ7VUyQqcNjJ++OUkyf75Jt+Kcmwygu7PnT7O5/zkfeA5L6KaDDDRGuWuDsyfBJ4Y2SRHT72Q==","shasum":"6e0623c1b1ebffa8adc785c028d5551f0db10b3f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.0b5c7f23.0.tgz","fileCount":46,"unpackedSize":895183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV4OCRA9TVsSAnZWagAAu4UQAIHpIB9yqQW5Piol1QXh\nmEL4hm8Thb/Na4ZpJVxbZVFfuX62MXDy7h27LjGHm9UYP//025T9H8YloqNc\nzNgk1yxm1kZqZti/PAbsD1PP3cXUo3DmznBsrxlUYEKwU+1BmVt59VF0M0Le\n7ma5ddOMoBHl9TRBo752sxWrwP9mQ32LBkwo3MgnzJhrAL2GbeaG/kXEnInH\nXtpUkxGGFEYnudbfsmYv38rJ2T6Owe0KJV64676y5eV2qRyTu2niprlT7XrT\nESiufEppxvj9k4FhqX+fFr9WKCjLcTsMrGlEeIVs/6Xgqi9ebM/fZVInebtX\nF/S+k4ANhkN5YtdD2l5XJdKGiHnKju7U7V+lO/8S1kebjM5qQiUxDKPHSgws\nuEOJbksiQhXLHgGp2BrjdDosxMpiiqj2VGQKIruMpOiAU3y84DVAEYYpjpQs\nWNeJd9/X2izqkcs71/KyzJM7N323mQG6r5k7Nfe4383pHsXdnqcBFnAgIjiM\n+mnfohMdnHJtFoZie5xswO/cSA4Bn7O/DLzR4DS38hTXM+kYgTQuIdB/cNAF\noJZmLKN5ZjeVUyNPecjUJYq/CmDy46zEKxbQ/YBnEI1GWtXgiCeVfIUObJWC\n4RpC990DKA+rz21fIy2Of0jp9hK+gOU7VTmnQ6kldRaMvUGlRLhN7hXHwK+S\n7W7/\r\n=fgN3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvtDR/7BMgafwrKx2AJyfGf9Szn49X6RXpVs9KhbyXxAiAIoyCpGull7QDX60m5+bB2DRDqIoFFOYLiSJuDFzqYng=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.0b5c7f23.0_1583963661719_0.3965496818650376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-select","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bec065920.0","@material/floating-label":"=6.0.0-canary.bec065920.0","@material/line-ripple":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-floating-label":"0.14.0-canary.6c0f0b27.0","@material/mwc-icon":"0.14.0-canary.6c0f0b27.0","@material/mwc-line-ripple":"0.14.0-canary.6c0f0b27.0","@material/mwc-menu":"0.14.0-canary.6c0f0b27.0","@material/mwc-notched-outline":"0.14.0-canary.6c0f0b27.0","@material/select":"=6.0.0-canary.bec065920.0","@material/theme":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-O5MFem250P6zBbQBhzX/hR04LdrBgr+kLNNhOFKifA/27XuTcOhO4hgQ5RZTLs28F30HCZfUGVqxiYBFGARuuA==","shasum":"57068cd8ebe6921e4bd1c8a79cc9b34d13d7d65f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.6c0f0b27.0.tgz","fileCount":46,"unpackedSize":895183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqb4CRA9TVsSAnZWagAAZFwP/3WID9IpSVi4w/7i8VGn\nDtvdhnep3n0lYRoOwFGOXEzVIkVSA5GKL5kRoHVpSQm+Aomapb+XQmCC9vIr\nEWIGZ7Gpif4j89cBQoBrVFT04fJeou7V/DmAy9StASKHKumEzOoqdtIa3wxS\nLOK6YDwEU80PUcaZ7nvmUO66YCLPj0TRJt736SDL/jtUW2xG10QYiftl1P35\nRiltS4o3M95qK7rHqZz324GJamXCYqSsQBULSuMYXhy0aWZRixqN8kzCQOh2\n7bhB+tKYyz0f/iKGmD8ZwGmr9WtGMylAvPr12C3EfbSgOG+JdCFviY21e1hX\n296qfc9+5mNgLgoK4C2CBVKiU2zNBAE/MHIefP1Bh2SQCsTB1V2LlQO2wkLG\nFdNadb1/oOuQ568joMQIAANFuP50LAWp5DmNsGLAFDv1UMo1J6u8ckJZmr6W\nRc5414ZhuqaGsS0HB8m59Vl03lpJVjDsMKGsH9axu02YBL0zN4ec4v8RCIg2\nBJv/6MM4zkfMuXY9gOsm/XgMdG4/9aFT5cfv6vHdWJQGTvdOlAotMuTg6/Nx\nWijGZ2bjQBhj4ulJq1HVGMmGbGScXeAwdA0NvT7PPXPVDV1LlT2BUBs9sWaD\nl7XmDcWRal9qN6WZRxAd+zDiev5N6PlZ9uBLy87Tc2CrcIXB+sASRQSUhQ++\njhat\r\n=esnL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEsJJcfmz06HKOAi/hrfoJeMA4oeAM9ybh0eW7bWjJ2AiBrZAkLFd1BOt+ClZ03QiOcB1Kt1j/Dguj8wn5pAqDRMw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.6c0f0b27.0_1584047864452_0.5848941988580392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-select","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bec065920.0","@material/floating-label":"=6.0.0-canary.bec065920.0","@material/line-ripple":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-floating-label":"0.14.0-canary.b6c53425.0","@material/mwc-icon":"0.14.0-canary.b6c53425.0","@material/mwc-line-ripple":"0.14.0-canary.b6c53425.0","@material/mwc-menu":"0.14.0-canary.b6c53425.0","@material/mwc-notched-outline":"0.14.0-canary.b6c53425.0","@material/select":"=6.0.0-canary.bec065920.0","@material/theme":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-L8ezbKizi3OcaWN96O3Hr+MKdSAPMNoBwEjMJL9PKpd4hyg1v70d3Gp+03JNJYfMilhwcShy0UMnlwGRKNv0zA==","shasum":"29e716b802a7e5a6cf519dcc1a5095a4216529ad","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.b6c53425.0.tgz","fileCount":46,"unpackedSize":895183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7sWCRA9TVsSAnZWagAAs6cP/jGbj8q59tU0xoQZ//4u\nUz9Ha/drvuy/8n7ZXRBCY/HYnAYTaRorLqdR9twzz8wQOxbC9oflS+73hLiq\nzNAWG/4F6fvf4z/QZw16cmAhSeEnTZf/vx7vFKIr91t6yegyk8EEMmeco4ns\naiSNt8siZU+S7Vt5xTSrUIOWL4hq8VtOPTd9qHxT71AKwtuWjhB5q/kMhzsl\nEGDAh6iC4Vzp0+0q/6i9Tq1aYWPi4KA3Xy9aV3sFncfROYuw9uxIYchq1dow\nSVhjKyyx2WIhsm8Akx7+VfJHd8XBnIYK8IPvZTPoafyPck/neZZwLwDMHObN\nT2DzSE+nYR6OW16jhY5tJODlGY+oBzA8ik9LVwPQqvpKwdZrYnS0P1OgR9uf\n6bZEDzKJ/jd/B7Uw58pUrWBtx60HsokFB0j/EdiAzuu0N5ovIbAm+qYQpamD\ndIDB8/9vzwmR3+vE9qdyH6sx7I6xf5fHFdTa1iB5Z1crTDB07V2KfdLOqdQO\nNVPIVY/7+CN4k5jUJ69ZyxUhM6Azy9Ou9dFtqZ/fLET5WvTKckY6j8dub9jL\n0NKXHFOADl6/KY5/u/s3qlwPHbbkiDsPcVKgPLoqPX6baABg8fNt0Pz3B4bU\nAstNOFiWhjHkDNqnhJL4OuHKJeq9FZwMMtKk7wvRkZZlgI7BujSybPwsH+jK\nmvNw\r\n=PZX0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq6t5uSjqidNfwLn+K2CYsPtDo3+vXjpARm08KM1Na2wIgMTt0nN2SVFmaZLfmJBsvD85n9A7H/muHmOHTnUwQiak="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.b6c53425.0_1584118550346_0.2122524799359251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-select","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bec065920.0","@material/floating-label":"=6.0.0-canary.bec065920.0","@material/line-ripple":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-floating-label":"0.14.0-canary.306cabed.0","@material/mwc-icon":"0.14.0-canary.306cabed.0","@material/mwc-line-ripple":"0.14.0-canary.306cabed.0","@material/mwc-menu":"0.14.0-canary.306cabed.0","@material/mwc-notched-outline":"0.14.0-canary.306cabed.0","@material/select":"=6.0.0-canary.bec065920.0","@material/theme":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-IiDwKi6r/X85C1s5OMAnTT3eDCEvjbNbNlvgyw2SXiQw1QhXzr8oHqb5RWj339SPdbdd2dXsruHOwioOpUVEXg==","shasum":"75488b634c2b4ad3c5067ce7baa65a9d72ad7c0a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.306cabed.0.tgz","fileCount":46,"unpackedSize":895327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT6VCRA9TVsSAnZWagAAT/sP/A5iaC3br+6jmFNj+b8c\nViKohn5TcnDu4JxovT/OSc5gh4KFShZnbaqE/v4dM13IXiwzZ+1obcmm2o0g\nBY3tp14FpqGOmOQFsMzcPVv8xvQfYwxuFZzpLxVKIwCbUADOBvpGjSg0VWkN\nCl2yVG9i3rtf0P2dK0eB/rhzM4LgdYKtWS2HAWPZWoSy1xSIreIheLB8YXA/\naV1BzCHcmjPsPsMAGU/FOAsTIAvN5qqqOES8kY3YWgHq41XQCqN8vb9Gen7h\n9c2948PSko7yjxNmk5RbZsOVyxEPy23HE3LrSCgJOkL16ZycuGEvkyQ0CzSi\nAoHEvYIbBH5oxlqsfR1kTDA6dw2/LUikE50yhVjbfNpglAsQt5l/NJ+0TeaI\nrxz4ZYVohVeFmYSH4s+fpECM8MvMLbqmdjcO8WzLf2OdbKOW7+qfF3TmMZ4n\nLIsDaL9D8Osg2x+tU8XkHD25gQ10np8hFww5v6MDuLTNul+WwgnMn39q0NvA\nwST2hMrXGHxmDsoqE/hvN47ybKD0YQt9o2BouOQCTMWgXPWA1rG1R5rQbxLL\nWJofJ30V/oUdrm9dJe/MSAlJ91QX0Vr42imsn3UWWw/OMI/TRWcTT6stHojK\n1fswlArF6qeRO5ix3WN4nsklkaJ7t8gQ2a8Xcr/eKxPGnkRkoecVsnOnOoJW\nOuuM\r\n=Cunl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBqhX/9cRzw5pNDOUVp2rpU4KD8jERhG7tImOVPRWOjQIhAOA0+Exjivt0ofu74g0bs0aL1B7H7F8blTg62yB1u3GH"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.306cabed.0_1584479892757_0.12799133104285443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-select","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.776291ef0.0","@material/floating-label":"=6.0.0-canary.776291ef0.0","@material/line-ripple":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-floating-label":"0.14.0-canary.4e250cbc.0","@material/mwc-icon":"0.14.0-canary.4e250cbc.0","@material/mwc-line-ripple":"0.14.0-canary.4e250cbc.0","@material/mwc-menu":"0.14.0-canary.4e250cbc.0","@material/mwc-notched-outline":"0.14.0-canary.4e250cbc.0","@material/select":"=6.0.0-canary.776291ef0.0","@material/theme":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HQZ081i1yxQ3F9S+jdxHTqVYTFqciu2dxX8gdnS4ndWYqlxJYjA+o8Lu1EE9PJmpsgmoz2f1uM2cjz/IriPofg==","shasum":"f4b2d274f37eedda3c5dae018bddf4bdc3325a56","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.4e250cbc.0.tgz","fileCount":46,"unpackedSize":895327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUAGCRA9TVsSAnZWagAAm4AP/2bZpmg6DRwfYUo7BZQY\nnZD5QKtzk8ERCy2Xg9M8IjZRuHsockto7ATU4mFhnHuXh3TH44fZc6QURXPR\nNFHYUDdGlObpim3jaP2U+TMHDwsYM1lxkBxOBpfKafNS6hUMWEosuFR6FHcd\n7i/x8YuwdwwgCUnqcl9yO54/gxlB9foox0ehwu6oo9K/sYIf7WtxqxBmfFR3\nFy3z1XhKoOcfmvd1UlMijXdMgk7Kt6HZYw1h6qUx9aaU8l1W+Wq+iDTxFEWk\n5lFADXtlnMYRASWMdzzDypDQGz7H4C83ZLD3gdNeaT3v0HyjG9b42CBrtYz/\nnpzmBOI2MmwDJ+mCfnCUT7JC/kCca51l0Es7cjF8qmFlJy8O34P73I0bhjBU\nZOZ/XiLw+OU19JD32ZSaTtBlkdvgjjHYJqtgc5zimwY8SBw5aUs+kpalQYKm\nDz0TYiV4Sz31jjIMrdOSaMPlILomYNY5xnvv2rm3i0S0s+Nlb44h2XAWem/O\n9J/DGYfp58Pu0Ejhkh/z0v3bcLXdy7yAykWgm6mc1YHQlWnKYHKDhALfyiEH\naoQTeoLwp6NbKJXhkuT0DHL18sq0Q6Ff7IOLkVytiRIOAVz1JgaGecfyatVh\nceyN2eNrj5k51i7Ej25TTg9878qYJdsCdcO/KrZRz2tleed17cXaz+mkTmp+\nqWzM\r\n=AxAK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3hOe0tI6PTnrVLX6vpyIw7r0mynfBXOEoZ60MDQjJZAIgcyWc43uIlLbyvU9fDQ2VjE7yvJnTyHVBVsFLIjQBhRw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.4e250cbc.0_1584480262298_0.5055979913239415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-select","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6b48781bf.0","@material/floating-label":"=6.0.0-canary.6b48781bf.0","@material/line-ripple":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-floating-label":"0.14.0-canary.ff82d9ec.0","@material/mwc-icon":"0.14.0-canary.ff82d9ec.0","@material/mwc-line-ripple":"0.14.0-canary.ff82d9ec.0","@material/mwc-menu":"0.14.0-canary.ff82d9ec.0","@material/mwc-notched-outline":"0.14.0-canary.ff82d9ec.0","@material/select":"=6.0.0-canary.6b48781bf.0","@material/theme":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------------- | ---------------- | ------- | -----------\n| `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.\n| `label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n| `naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n| `icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n| `disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n| `outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n| `helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n| `helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n| `required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n| `validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n| `selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n| `items` | `ListItemBase[]` | `[]` | List of selectable items.\n| `index` | `number` | `-1` | Index of selected list item.\n| `validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n| `validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n| `validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is:\n```ts\n{\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valid: true,\n valueMissing: false,\n}\n```\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `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.\n| `select(index: number) => void` | Selects the element at the given index.\n| `layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-select-surface` | none | Fired menu opens.\n| `closed` | `mwc-select-surface` | none | Fired menu closes.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n| `--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n| `--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n| `--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n| `--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n| `--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n| `--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n| `--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n| `--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n| `--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n| `--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n| `--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n| `--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n| `--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n| `--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n| `--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n| `--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-iy8ZMf9uOxuI566E/9y4eSltKFmK4g9nJdPA5/bexhqK1PoooPy+THwFOFureO+yB6E+JdX7ExNsCeTgzB4iaw==","shasum":"1150d615a5aa049c8dbe5fbc562fdaec3f72e381","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.ff82d9ec.0.tgz","fileCount":46,"unpackedSize":895327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZ2CRA9TVsSAnZWagAAMr4P/iktOoDA7lhFffv9elw+\n6Z67xpv1xuO9atzryVOa77+8rAtXaqgVk2WfTmMjyiS0lJlr6iQ4Vc/Fn7CQ\nsSv/yyR+wyZVfyp/R+oTNuYIax7QIPzVLQOORzJ1rMkd9prJbt2UrQQI9Gf4\n3nGjh3SepPVqsA5K5w87J96ubgsQYXAUc3jv4etfLNmXFR/3O4o/c+DpIq1/\npOHqqwCAjr/VimdBj/hnDdP8t68jA/iK4lOAWa+MVmxGcyeIZaI8/D2xISpi\n/6ROIFCBupzuG7sH5h8TNkRXLnjhtC7MQQX62t0CMzl1KwI8/q8cu/m9shPe\nqn8iUVSXxAGhmB1rHZrYf2skw+gTjjDVZD0mz2fwWE2wXazhkvIxuQxJsqkF\n6OVp6uO3gSPQNYXliqp13OqgOVNSFNcvbhbr5Z9V0/Yzxm3BC/3B7kra0O+R\nxYGbGp4l9DgR0/Hyj+oKXz5VuwtjPDrZgYBxE2O2CRvI3xW5lymef1foo4cL\n3acBq3xLalKQWRwEk5pCFuy2AbLamdju/IP3Y00dEMr7GAXelQk/YVwMEA3t\nmPHsSflobGrjiPjo++mGqFkZ/H6Gmd1AB6u1ojV+Bt/K3K8KRAMvMuqFoW0V\nM946yw0+l5WtdxA8T6ZPf+3gZj3lRD0Y+/QjotWIYdoZU6/cZSEpxbA/vPzH\n2mxm\r\n=BlDG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcRktAlh+bEkqkw5C7TDM9xlZf2aAwdMcRd0jFVBlxfAiABZ+H+RYNR9a7QcPmn/cGaTulny/ejI8gpQBQkbYdFfA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.ff82d9ec.0_1584555637531_0.3771744545641076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-select","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6b48781bf.0","@material/floating-label":"=6.0.0-canary.6b48781bf.0","@material/line-ripple":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-floating-label":"0.14.0-canary.f50f48ef.0","@material/mwc-icon":"0.14.0-canary.f50f48ef.0","@material/mwc-line-ripple":"0.14.0-canary.f50f48ef.0","@material/mwc-menu":"0.14.0-canary.f50f48ef.0","@material/mwc-notched-outline":"0.14.0-canary.f50f48ef.0","@material/select":"=6.0.0-canary.6b48781bf.0","@material/theme":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7NwWe65bsukX7BxPWV7bwhnB7LvqEQheaxIyQmDf8fXpOMEyotsbFZsUCxQl1KVyRI0rImL1XzMDIOBfHHnHdg==","shasum":"deef4c2a1eb88b7a94406ec8135751e81002feca","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.f50f48ef.0.tgz","fileCount":46,"unpackedSize":897842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8A6CRA9TVsSAnZWagAAOnoP/2el69f9QlC/lay8qQZC\nQmXBAxi9JZtK5Co3yE13vw2yWZRgRaPQPUDTx8FxcnOAUOsYbKhARn5ZnLdH\nyvX/bwogaV8w4m5y3+aJeNOpUDdGsUiZuH4ca94jpsEyn8qYbCsWfq0OGwfP\nI1KWUcLFNIbD/RRgV2UOEeu64w30/Q5p6a4rkvee84/GFQSkQ5Rqv/R+o4xH\ndagZxOLJ3jy7ZNv3OunmjDCU1DhrPlDJ03cTmxa/7eDHXT6s/exDBcMyDqKb\nwWG6a9GzkIzs0+zs49ulajuC5qWquUM0MYg3iHcHMq/F/8mg4BreWyz78H4G\nAyNnAUPAbgF11H+mUqLm7WJpbRrGA4Z48Wr7bg8ko6qZBBqgWOXgYeleOeEd\nl3mHF8/bzdKBZr5R2Mm8bePIFl6m/nOG+fWgmBhSwye3XfZOnYjNj+BzWIOK\nmswT2JNMbBqzRR/bFkllweS6cFB33g1lRwICb7qsROvHQ11tPx15YQ9/2IDX\nJ5Ub9ixTrA7K2ZZSy6cIX9/tGFtw4n5XixRsVof3WGmCK9x8Wpkg7ugp3AGx\nlMCM7DuNqj3Fm/DSKbJLi7VQSBEKwuNHDwMMDfK8dzl38iCWLoOIhDNh8ow/\neWUsoVTnedVuVwoL2kYj820bBloMc7HwUcPPqRDKkYJc4Ck4obZ2ipZwfS9y\nZtVf\r\n=8SY0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJuuLhT1VeIoLqfATH9FVKg/DK726nUuX2MorvWfnwhAiEA61Ur/z83A+58ehhZR6DuATAjp4lAr/JKuR2r1TmDw7o="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.f50f48ef.0_1584644154020_0.597560862227501"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-select","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.a88c8e4dc.0","@material/floating-label":"=6.0.0-canary.a88c8e4dc.0","@material/line-ripple":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-floating-label":"0.14.0-canary.134cf877.0","@material/mwc-icon":"0.14.0-canary.134cf877.0","@material/mwc-line-ripple":"0.14.0-canary.134cf877.0","@material/mwc-menu":"0.14.0-canary.134cf877.0","@material/mwc-notched-outline":"0.14.0-canary.134cf877.0","@material/select":"=6.0.0-canary.a88c8e4dc.0","@material/theme":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Sxm2bCt42ztZp8e+hKLaH07m2EVpArRL4QxAvwAzfZI2AJJitxgGpQLEw8ZJYM6OFrHrgGX2vHoA6aPGMjcoHw==","shasum":"7fbe1e580079985baf488172e3dab8cc175a0a07","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0-canary.134cf877.0.tgz","fileCount":46,"unpackedSize":897842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9iZCRA9TVsSAnZWagAAW6cP+wb1kp9TtNzInRmCIJ76\nrFvux6BFax43vyr0V0M1uSQB6Bym/ScUIqTdiI85amdkQwEprL7vMMr9sJqw\nL75PmkKpJ1px1BYtrJF/GtKX7WyoKblBCqHF3FC2DKk4Cclyoj/T9+f3wRkO\neE97kCqv0iFBqEnehnV08lR1D2GxjkqRTWmEu+KEvPQwOk/RKYvWuOEASHBR\nitX8SS+tRKE5+MaNHH6l4KjX2Zj5d1AnFKNC/u65G44ygbmao8mDD4Hb4uvt\n7Bs6XsB9XytqXwX41WCiOI7A7IDF5Q/+IyRwNWGlo3hqD87ge2E6YZbcIxfi\nfa5hcWb/A6irpiaTaNZwAwKZA4QZrz3j9KAZsSMwqwrSa4B4r8qstRUWWWo5\nHhOkc06r6GD2puM3K2vbwYLIaMERtA3dLwzTH2U2H/Fd17ChnH5tdOnsDFs5\nW8qYF4AXa9f2xuHha7N30QP7UeSwjqjYzwI4Kl2npZ1LhtwTxOJxReYej79i\nyYnB7dLKs6QHgdUx76JxlvTuwV7CrgPWZcRtgdg12hlow1mYQpIoMMJs4wEF\nY/UZaTSRoxwyjZk7gU0Jb5CW0r7IPXv+JX/7mlkrzvCNfEH3ZBvSqLFzKWwv\nzkJFyRp02TLOzt47n6QNen5XjL7OH4wCJWcXHgN37Du0TDk3CitmXbFlRc0J\nKNpy\r\n=gRTS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICkp9TXQTmhF6YEToJpnjbES11+kjs2ohbUuhAjuMN5/AiEAnaBu/PVblfCd/h5vJ6YIgegEyPiM0hRDku84OwtS/gw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0-canary.134cf877.0_1584650393128_0.9498614046223353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-select","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.a88c8e4dc.0","@material/floating-label":"=6.0.0-canary.a88c8e4dc.0","@material/line-ripple":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","@material/mwc-floating-label":"^0.14.0","@material/mwc-icon":"^0.14.0","@material/mwc-line-ripple":"^0.14.0","@material/mwc-menu":"^0.14.0","@material/mwc-notched-outline":"^0.14.0","@material/select":"=6.0.0-canary.a88c8e4dc.0","@material/theme":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","_id":"@material/mwc-select@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-LGmo1x8wKItiHB+13/mPcujCoRGmbedsa5Plmfd093BVpERbV3ovNQ1Uc39RM1EE7iF/W4e0h67LeCpb/4K6TA==","shasum":"3c1b2d74ec182f579c5defa4a2476e6f5780ed78","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.0.tgz","fileCount":46,"unpackedSize":897722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QbCRA9TVsSAnZWagAAHTEP/0xJja8+5tYfww/1Bt1V\nG5OVIZ7luEJiJuyD95VaJgcn7YsSiPTu3b1wTrvWk7DS35zuCtnTi9zMXy+I\nAZdnIUp5RyEP3rVIR/Z1dLJaPtCVl/N6xCTVYm10ueVyPalsgVB+uk0hgIk3\nijcUmL4nHi8KwGW9GDkPvAHQ87WYuVuZnQyT6KtTHIngKPn5XiWKw8x51bTr\nnuAubvZ/r9uNtodoy4jr6YJmNFOMugaaJdRGs/cwJh+XIOxtEeKCa0+r5JTK\navZKwYxXJSNVMxXfEMwiP1p5wCWLI28kpNASD6TCggGLRBDsisP18SpdiSB2\nSJnUzS9ZQzpgzO5uXOPYzpPPR2fBdeHcdhKhIlf8BAaQw7l2EPwR9yQPQ8zx\nwR9jP+Sx1/rOMI+esYej4ml4PRfIrl9h6v54fD02GAqIzoivrSqOwyL1nGB6\nbFtNCvKMTSvAnhHCRUfn4PxvC+E+1LAiuvyoeNi65C71KFdMRBUMj5w5xood\n8jGZv4IpKpQ5JJodBNCyyyAgQ6FIaeOkEv6uOV/piC5YWreZoE+rUEWd48Wv\nvvV9gt1zUgZLBUCEv2r3lxzIvsuQzDRm8ba6UApa9ezNfcM2ku19miz6Eckq\nDZ6eTBdxWoGd1lxXXWOAsEE+BgNbMzl8Um44GECYSbUbFri/V5QrZbI6wnq1\nzsIg\r\n=RWxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfMLAgMMLPmg2pj/W+ZE7F5HB6CkvDAmf+HOKTeLIx7QIhAImP1sM1LsmNXR/5EETeBlwESYJWbhNgHStLZnZd3Ofx"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.0_1584653338689_0.8779097614735796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-select","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.a88c8e4dc.0","@material/floating-label":"=6.0.0-canary.a88c8e4dc.0","@material/line-ripple":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-floating-label":"0.15.0-canary.2c1a4913.0","@material/mwc-icon":"0.15.0-canary.2c1a4913.0","@material/mwc-line-ripple":"0.15.0-canary.2c1a4913.0","@material/mwc-menu":"0.15.0-canary.2c1a4913.0","@material/mwc-notched-outline":"0.15.0-canary.2c1a4913.0","@material/select":"=6.0.0-canary.a88c8e4dc.0","@material/theme":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BSZ9oLW3OtlloY0I3jUxwd2jdf0uja697J5gDoojEUJFZP3OVJ4jLXbKPmjAQ4Vxc5yAMdkimOaiR/F49dA+Ug==","shasum":"ce19793433d70ed78e205fee129d6883b512ec04","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.2c1a4913.0.tgz","fileCount":46,"unpackedSize":897842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/nBCRA9TVsSAnZWagAAIG4QAIl/5sH7wMuoG8lbuuqm\narPuQSitzG1tsDkZel8pZruO7cYOjXemYDX5fVcULwx8w+tB/th3H2rNGCjs\nFcL2k4Y1ylTpIK59Ii08rRj/fwXA+fydJm8oyEDLSr/nd9C914ksGpkps9Gc\noVEsdFgmIh/w9fBFmEJfW0pJEh1P0qw3u8E8NebfdbYwlPFv1w/2G+DrJ+b7\nbfcwh2ygHnzj3jpELHdfMpsCk3LsJs7VXMUzzWWwkEPVkpKjbo4ByuUJD9Mf\n/hQSYVfFvI1x45GDKrWiG2SsIdotZorBJTBWd0XQkmzS1hOPTNTl/zJ2BdNX\n4cdwS3aIABjigVLpUaWIpXZQjmvOcALTD1Y67kv7aVQXSEBbOJG4Vc1WPDSs\nRQrAnZUTi+JeLroTu7HDVrsX0YMAO9cxJKQ8TzstlLeTYnCwPS8GjHPaERHg\n9KPi/V+Zdv6mEiV8rq0r22UoNljIzm1yh8wgRT0TkaC/ywmG5Q8zBzhooWr/\nqWT/M47DHxbJdwMisT2p5qkaHtE5+1qIuVoIp/kVYLsQCXftrhRy/IETgFb7\nIrMkhHFac8SG+DLS7z0OJpv++Tm3XsZ0WdwLBofXCX2eB09/ZJBArddwSfJg\nMsadthI8AA+bxnYVd0I4oPRB/e37aDJtzbrKgMfGBc2VNyS447x9CMAR+JRx\nXkrK\r\n=BLLT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2cyO1SimPkBVdl3PIa0eFUwCwuWvA9pLIIpQThYWpRAiARP96JL1JjTx8VI3e5uXrTjSsFZDiOFdEHqyarUXXLyg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.2c1a4913.0_1584658881211_0.21919312087876808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-select","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.cafe18860.0","@material/floating-label":"=6.0.0-canary.cafe18860.0","@material/line-ripple":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-floating-label":"0.15.0-canary.3a6e481a.0","@material/mwc-icon":"0.15.0-canary.3a6e481a.0","@material/mwc-line-ripple":"0.15.0-canary.3a6e481a.0","@material/mwc-menu":"0.15.0-canary.3a6e481a.0","@material/mwc-notched-outline":"0.15.0-canary.3a6e481a.0","@material/select":"=6.0.0-canary.cafe18860.0","@material/theme":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HhFCKITNjtox6sk/vbW5Nf8zlB4O9Ric/rQ8uxzqY1UqB7d1R35D4Klf8jRzgv25cBSuDFb3cyijx14kKStF3w==","shasum":"7c60ccf0ad9fafb6b89fae52c01ff06aa8550d56","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.3a6e481a.0.tgz","fileCount":46,"unpackedSize":899030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQfaCRA9TVsSAnZWagAAwtgP/2UgjUq7Ve98l7TNVxiV\nDlPp8cW81pgpLgIKbJim5jfWj4+JdQCkEP8HYUbQ+s6uU1EVB8ur8zrSu79b\noO1LS8h1TuV3+w5P9DW8BXAPijbM5bP7I4X4qnT5cNmFzMHlj9dY3ZlH4SIY\nEtKbZIIoRsjAUByYK2V5Hn9XkHbOCuI34+SzIVYaWr2LWlq+ZMWYuJ3Z13iL\nZ1x+9/uyBEHtxz9AKHaNwGG/QKOXD8H4DgbRMRFi4zJE7UIiQI9zjmZSLlQC\nWeCIAEtTrNGd5+yPDfrrxjMPb8vaWLXprbFjYjcl4GVy1n9++1lBc91/07Ic\npx0V9PeZf/Qt23xPmFLl4VOUT2de4UPpRrud/5FXyMO+Xa6ZXR6plW847Dgj\nIPXmq2dSdAgGj0mAmPx2cRMxTauCUoQWSTtj0Nxaptk8KrngsbS8NRiGJa7X\nc1W6uJAASdG2UC718n05QdB+XYindXMXeFK5LKH1YNLvEixv3Su0jUQPSZSu\nd8+Pcvz2MPFpy5LeNDbzePn3xKGIAxIpfmODRQ+Lc6/JoGNylvZhN9GKyC5h\nW3/uTtQA0/WfBA/m8GCJTYBohMJkHR2eXPt+f6cNNyf+9mSLUEm6hTZOXqrf\nYIzgtG7/5Jx1YtFhKeKE7D3v2j16LE2+JGoSw7leW4+nF5piL1N6VxNNQjR6\nLHR7\r\n=pQD9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzlnG0RkjkArepliCO3uAhzS9lWsvGMbpIe4V4I1a2dwIgOugXdk0WhBKQAmuYMUpql7tvDKwJXaGZ32kEZhEKgJ4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.3a6e481a.0_1584728025891_0.5094248322911823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-select","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.35a32aaea.0","@material/floating-label":"=6.0.0-canary.35a32aaea.0","@material/line-ripple":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-floating-label":"0.15.0-canary.603d6eb3.0","@material/mwc-icon":"0.15.0-canary.603d6eb3.0","@material/mwc-line-ripple":"0.15.0-canary.603d6eb3.0","@material/mwc-menu":"0.15.0-canary.603d6eb3.0","@material/mwc-notched-outline":"0.15.0-canary.603d6eb3.0","@material/select":"=6.0.0-canary.35a32aaea.0","@material/theme":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-saWEmPV/OyizyuyC+o7Wc1l9aT3+/qUcTd4R2loyNz9mNzyaoIF0as0AqQntnrckSVtNastzwWzt/KJtA8jRRg==","shasum":"bc8df720fd26827d8b88c68fd14c9e5a78d0d250","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.603d6eb3.0.tgz","fileCount":46,"unpackedSize":899030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTdXCRA9TVsSAnZWagAAewEP/1dloVA7aWdnox7a2AOK\nR3aOwS3LnJimSafhRrVlDK2YVzyel0J4upWmzaSUj2xNlB0B7FudPfoRV0Pl\nlZUHryFKKnNiTXOzSfDS+XHgjgK0MZSq0Jcs9fa8LGVt84/t+p56WGpo2m9p\nTpuxcoL5iy3x8UEKYcUe+9JjSYOobJ6i4ICmdabZX4CGkuqWXe0kglE7oxe2\nRUmmp59Q43UU+yKMa4+FsDn0ysAUFv4YszwA8xNOiWwnJF2vtrp/yrEklyUK\n+WHCDPT8pxe3ELZ/LtVSwJas6a3FT4Kyud7Xkj3UMedztvtArDy7p+tD6u/Y\nMVaP4l/asSAVYK8SobrqBiPcWgRbQvtBGStm4MjeE4z/oLC882vEMMAbolgs\nXWhXP8wQn5R3lO3T1IdqrOkVeTenI10H9nbKZoClR6yFj7c47Bde2zbUgK4l\nwlUxyIe+VMp/j9j29cfIANVH6ulLNKLZT+5BzOQjMDiZb6W1uAa8S9qHyeWw\nP2qLsLggf7eb7HlqF4tui1jdJL7mghbruhi2mNwxjKP0EAMmE6qrqjOeVj2z\n0QTypQ5kFTyk8BfQqdRW0COkDHMMKvqpzj6ycgIT9SCRJbOXbb1DOwXZmis+\nfa0vsHG9EeA81wiHunRZEG9TcZHQS1OghYlZoQ4R+1QhHp13L0U5KgWzjm+u\nErer\r\n=k9FG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATd3XVZpuQrE1WXWN2pfmrQ8M1lpYXpDV5UZJS5Uz+FAiEA3PnTlszOTdbRppgAwjWSOaoqR+oroID+wdcY85rvMcg="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.603d6eb3.0_1584740183176_0.7900427299130683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-select","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.35a32aaea.0","@material/floating-label":"=6.0.0-canary.35a32aaea.0","@material/line-ripple":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-floating-label":"0.15.0-canary.05c6a93c.0","@material/mwc-icon":"0.15.0-canary.05c6a93c.0","@material/mwc-line-ripple":"0.15.0-canary.05c6a93c.0","@material/mwc-menu":"0.15.0-canary.05c6a93c.0","@material/mwc-notched-outline":"0.15.0-canary.05c6a93c.0","@material/select":"=6.0.0-canary.35a32aaea.0","@material/theme":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-qQOt12EY6ZRuIJ81K0M9rpuONNx7z6yPKJ82dAmxK8BRwPPUSasOzWuEfdSdrvAMmIa5UzTOUfMUL9Fn2RDHng==","shasum":"5c8d8a4f9153ee91c516063c1a890e618459e00a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.05c6a93c.0.tgz","fileCount":46,"unpackedSize":899030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWsCRA9TVsSAnZWagAAeX8P/RI3vny9JVEwDnG5XgDu\nJvOFGzhjYAKdGIoMjib0EGLC9olnPnU4AK5ik+caFjlzCXJDGkoQdS4zJh6V\n6h220weXNBqcPON8n+yjLJar0HJQ1gIGTK6SmGtU8welApntvygjQSE0ggh1\nEM9oR10Unz9M2Y7m9zes/s9lOAwHzp+gYRDHPWkcipclG7it3DXMFVgBOktv\nB8pmch8PwX3uN1C19/MFWNq3nyfJY5TpWeJBU9mrlieuI1X3iSrybeqXcQQs\nbTSa2Ax92jcunikSH4HvYUYuABz/mlrYQ/CXH6x3Q+0K7dD8S2LbjONuKFt2\nZyjFdkSTb2MqVC3D3COENXX1HdXAI66E1KGlbyu866auM6A0Uf9J7xGhYhAa\nKvfpt86jfpZwh6kecrlOWjwh2ra8O4zrzPatCRrP7akrHXcHA1aZiI6bAn6e\n6JcudkgxkToWM6HHP7zv6A2gTAptNlYMJmdGHunUCN/8q2PR0MaVFMwlhjwP\ns0haNyuVocJjuBBRiBxv313gLGoLiNSRFTpts45+0/SeKNHOnkf+f8bBSnCT\n5lbmCtf7Pxazo2S330z1mOfP6s+B3VOcpmSKfVNYI/bRHCPCrLt/PfjKFrJE\nn+Jf7wSgZGoF2hQMTXisRWZ8bHXyN+me917UXzVYkUjquHK1lfDlZen0m39z\nQplp\r\n=xFd4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcndncNxo3ZWrfMFaZa6kq2PBbxYJDcxlAPCfJ/xQ5KAiEA6azYjm0yKpAnGTyOKl2h+/WgY4h5M0DxqQMhfS7s4oA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.05c6a93c.0_1584981419679_0.5102641760570799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-select","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.35a32aaea.0","@material/floating-label":"=6.0.0-canary.35a32aaea.0","@material/line-ripple":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","@material/mwc-floating-label":"^0.14.1","@material/mwc-icon":"^0.14.1","@material/mwc-line-ripple":"^0.14.1","@material/mwc-menu":"^0.14.1","@material/mwc-notched-outline":"^0.14.1","@material/select":"=6.0.0-canary.35a32aaea.0","@material/theme":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","_id":"@material/mwc-select@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-DhPNTH/6tL22OOVqScnst2l/jJmfbuJnQvVS8xJFDClsNaME7TWSSw3nO5G5jrMfQ4B4g9exYXvChbuV/qq49w==","shasum":"be515033c8021553a068c9b615bad72b70453ff2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.14.1.tgz","fileCount":46,"unpackedSize":898910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePieCRA9TVsSAnZWagAAmMUQAIawkz+sTnTDTD2Q940N\nB6Va8F//5h2DrDcrW2kapo79wbTeXsDhrl+IkD2kXloFn4uECbaVQzRmR7fU\ngIwTvWwOqQCCXbD/Mdq22iTEzKnRbZtStd9qqqcxZ4sqjyhaOHvrteg5ae7U\nqUvEzoh21dV7LF21tryBHSJhnCji/aSu6+iaP0BlTT9WEeOE+9/gxhjl/YLl\nwbO959m1FQmCcYG6Qd5JD1RXXBT0hWExfDM/G1fp4sRav1SkseFMMbkXUuPL\nvmiqHwstljD/rrUNlOZvzBUpGlXwGcDJaIrAtPBoJhX1v6n/XI7katQgv6sq\nS9kXnI0ZpXIVSvpKBc8vvH2vpu8O2u0CDIcL2tMFLnRvc0r7LZQYU03XV18O\nWYyZayKTOZrzNXeU47emWIfh3wiKRsdZeeYvtRBCDJeEmtT37cuhcNySGK0Q\nC/FnGhaCB2AJeMQev8/kO3Fgq9N7X2V3vWjKr5yFIFq9POUWfLMDaljncFOq\nw3W3/Ch9dg3cyb2GC+q9c/96DI96SSbEbY/gK0oOedv8Pp72+sevrPs0Xvkp\n/mQAV4nXruaGEhLbpa1EbOFucOg+tKWCbnCpQDAOAW9mGP6oBzPqEPfp4XZQ\nBHWj7DwO+8DOthThgjWkuIUYnnBxoPeascZJpj8OevOqTd4EkMljgZwVHSoK\nq1r1\r\n=zB4v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrMQwafe6mB/VKSYDAEtE6j9QheRpAjqw9Hz9gGhQRtAiBETSx+uTE4O0b8kJ9wdDhlPnbmoWOtDfwm6Kxgjm8J/A=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.14.1_1584986270244_0.1575125370074919"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-select","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.35a32aaea.0","@material/floating-label":"=6.0.0-canary.35a32aaea.0","@material/line-ripple":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-floating-label":"^0.14.1","@material/mwc-icon":"0.15.0-canary.4e6be3f4.0","@material/mwc-line-ripple":"^0.14.1","@material/mwc-menu":"0.15.0-canary.4e6be3f4.0","@material/mwc-notched-outline":"0.15.0-canary.4e6be3f4.0","@material/select":"=6.0.0-canary.35a32aaea.0","@material/theme":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tp8EZ4g45Q/GCLPVB7npjhCsY8cSY17SCoCElo+Kgx1LoMXVUTLO3HX/zbmyk8qW8gYEwbW+SziUXeY9CYrmpg==","shasum":"8a225bd72091f3733726d59f169d74ede7fdc879","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.4e6be3f4.0.tgz","fileCount":46,"unpackedSize":899056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSpCRA9TVsSAnZWagAAvxgP/0dAauS8bLcKctLGHlKR\nyyNh1Rk8uN/ELQFIKNsSjGmUVb4I8ek2I4GMVQ0V2vZqtbFS/dEyTy0sZAJM\nq2/bURe3Dy76kitWTdVZwM5XvrFUAy4DXLIXb8nTKNK01azUA+bZELHZngIu\nYGLTJPadS7lfZxY6SWAdLq3pOq7U/CViVqC+5TLCPkwXxXpM0B8v+dAuzT25\nqX1Tf6jEA0SVj9kJE/Bw6hc42s6NntuGvAJ3q8UwAnXrooPms/o9nRz5KfB5\npTis9KdaG1SL0OFFgjas8vOJX7wWERFvxZBLOV1DtxJW3D7cxSbHcDeW6DZp\n9oncZ345vjUBnKlhfbhM2bmkGRs1zyFSN/L/tFzWVQ1omy6lvgphRVEA71uK\nn768ILpHaJ9uV4Nzoybzyx0veTis9G8qF9SRJP8J+eapanfKjDwMX/KXqpnA\njdfnRAR7TzWUXP2hr12SbI4ZtJyTsv6WCJCDl+4HOMVH+JJnaH0O4msbq7+V\nP2FcPK8cxwv14luMPD5A3Jh+C6nd60PTU7EwvtY9RbtvfQvmLmXLZBRSvWJ9\nPXYvrtXyVFn9ZcClxCGGy1mdLdRWh2Qv+uZB9D7cx80AMmfj48vi8MhASX0a\nvw9Xmg3bICFhDyK38xZvzX0cZnvclUBnhTaGAMxucb11UxbAx4pIC5pZGVsd\nkY33\r\n=iKbx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1BAiTP0Wc5yC2u/vDT08mvlOM2MwT1BflP2BZHz+OfQIhAKwsn/aEdB/qFGSkUMm3sf31w8HUJH5o4E6Pj+OFibej"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.4e6be3f4.0_1585083560967_0.05243681278872292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-select","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.8707953b6.0","@material/floating-label":"=6.0.0-canary.8707953b6.0","@material/line-ripple":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-floating-label":"0.15.0-canary.c29a683d.0","@material/mwc-icon":"0.15.0-canary.c29a683d.0","@material/mwc-line-ripple":"0.15.0-canary.c29a683d.0","@material/mwc-menu":"0.15.0-canary.c29a683d.0","@material/mwc-notched-outline":"0.15.0-canary.c29a683d.0","@material/select":"=6.0.0-canary.8707953b6.0","@material/theme":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gCblUnWkKthedUIg/AjkMGGUq4qAwogPM5xdlH1LTJ9NFf/sab5TDVoDWlvkQSkTMpfIWxWluLcq2Xjx9rqQYQ==","shasum":"2ffa10f05b9764984fd053b284fec164f0a5053c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.c29a683d.0.tgz","fileCount":46,"unpackedSize":899090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenjRCRA9TVsSAnZWagAAVOMQAJByMfC9d+mS/apWt0L8\n8uSc5/jMlaLqfQ6z51fDspPofd2WXN3GiPZ5l/KRbePPovq14ak1389qY7Gj\n2Bm99j48hTduOiv9tmCRygbbd6f1tOyLsyUrx0ggsYzwNlpUUyoijJMoWLFt\nV53ap8r/1kANiVolKAtgbFgvVX89L/ksGJXc2qIPZcK+t3R98zp2O4DACdkH\n2o/X1E70U+uF8B3zKN6Q2qn7u96MUasFw+DQsL9PYYYicAiuffOi3k3cDO8b\npFLchMj6gz86FgFQhda6bmOHRWs8jlVxMfrMvgt+u6ja3DRE+wrZ5jpFtE/2\nfgYOPhirqr2TSLfsDIX8fZgsE/MAWd1ouxSlRrr6TG83wYiuUO84VWsgHxgO\nWKRc54cXSWbZllm5tM0pc3Bl1kx3mf6EQPJwdxEuXdCiQv2fQ/r4e5DMSmCO\nWiKodEihv4pfnj83RkL0S0msGUe13n6TI5NNSv/KwpxHwRnIWHiC6abhzO7u\nJAAv7R6hBJt1B446G5fUl2iH3vFW5pBmD7JdJihHU92P5D78q2iZsbKqHTCn\nM4owlHp09GETo2SqwZNStxULXzjI2Liy/0Zl92UtWVoKJ/XwnpMCgDok2TJq\nUAwm4ygofhqDENPV7KWADicqht1n16k2uuPmQLEkTBPlZ1VDNo2M8PLgAJCK\nA5ul\r\n=EjCN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF0tFfUeVs75+rnxgmAm7p5H/4Qpu/XMBiUFH+jlnOlQIhANWWdqq2pxggtYYkBSxHGFcn+AJ//bYmPVno/XPHClSZ"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.c29a683d.0_1585084624933_0.34026322324086156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-select","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.8707953b6.0","@material/floating-label":"=6.0.0-canary.8707953b6.0","@material/line-ripple":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-floating-label":"0.15.0-canary.fca3dd9d.0","@material/mwc-icon":"0.15.0-canary.fca3dd9d.0","@material/mwc-line-ripple":"0.15.0-canary.fca3dd9d.0","@material/mwc-menu":"0.15.0-canary.fca3dd9d.0","@material/mwc-notched-outline":"0.15.0-canary.fca3dd9d.0","@material/select":"=6.0.0-canary.8707953b6.0","@material/theme":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SuwuLWYb1xGwi7V2dlVqdESTj2w/hgfBrMiy/ssrNFKS99V6tojkuUmqXRLY4hR76qy112PwDMJbREPHqKOdPw==","shasum":"0c93bb45c67ba236d91a33a6ebab0cf3c9748336","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.fca3dd9d.0.tgz","fileCount":46,"unpackedSize":899090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsoCRA9TVsSAnZWagAA3KwP/A1zy+7VLBd5d+p7fDcH\nauJb53h74H3B3VUYJEqq7BXV2RoLyqVNXNTVmhDTboJAb5DhkhKr3ZfiZUU2\na7CQQTfz+K1c4ae6qh4/6iMsXHOIVpTilWwQ0HdzTQpLTaE6OKFDs5Nr5sAS\n5/YJCH4UOqiHVLRvyR1LNbbMYBnfcKicBpQmG9MVOvDs+Z/IFWQuvcMdhexY\n+E5pelFbCOyuSVcqmP78a8y8nMFiwzjUNJDQFpsKfdEb8PIRUty1DObxdEVI\nAnQL7roy5rbYHuoW+YV821eETpQghDGCx4PTo6NmGFDzDeh/D3dJ4JEqAllq\nYUuTmnzF8NNO7JeKhsqZlU3Gi7YiApHbgW73PmW6xev1+jd6rPtft7KgbGB7\nRHuS51fK+NJaOs5PEB9gTE7VopYliFP3iaS3eU6wY/v4KTu1JpeHt3NzoEQz\n+O49IidWHYDWpAPbIEtFf2yryYA3JPzlG18NPPbap8vr69Rpv0DWxJnbtixi\nQxxdLCJ3AwXzYDOXLdD+uBvxr6lwN0WWq/xvWqXd/8e78UfxTwqxUhEWRFpQ\nd6EJEc2iwc/TMvRScVM5ktB4/52MDLzDD+q+R3AZ5ozjGJc2MGkSw9mOKdkW\n6+qmbuFZ85p91VcR7+W3hZ2hxFW3R/7SFcXXvB4yjhZzG+UWTEUy6TyCMlN/\nd73P\r\n=Txn/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8OqZcRhq6RyShIlSeqPz4XmWBqHpcUYLt+W9pDwMJmAiEAjmKA0X+Ks0fDwqkQw7SccO07LsSvWgQ5XroEFJfQ75w="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.fca3dd9d.0_1585093416411_0.366754243028798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-select","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.10af6cf39.0","@material/floating-label":"=6.0.0-canary.10af6cf39.0","@material/line-ripple":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-floating-label":"0.15.0-canary.1e73da49.0","@material/mwc-icon":"0.15.0-canary.1e73da49.0","@material/mwc-line-ripple":"0.15.0-canary.1e73da49.0","@material/mwc-menu":"0.15.0-canary.1e73da49.0","@material/mwc-notched-outline":"0.15.0-canary.1e73da49.0","@material/select":"=6.0.0-canary.10af6cf39.0","@material/theme":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made via click or :\n: : : : keyboard aciton. :\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a |\n: : : : selection has been :\n: : : : made. `index` is the :\n: : : : selected index (will :\n: : : : be of type :\n: : : : `Set` if :\n: : : : multi and `number` :\n: : : : if single), and :\n: : : : `diff` (of type :\n: : : : `IndexDiff`**) :\n: : : : represents the diff :\n: : : : of added and removed :\n: : : : indices from :\n: : : : previous selection. :\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ecE3myWCCG8xk5Hmn80hcMSrImPHnD7YGXql+eOErvwRZOGYctfHKtFKVfzbELKiXYWzG0coQDyZHxpAKlBJnA==","shasum":"6e4299e785b6d1359fda6d5af51946a2255d6bfb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.1e73da49.0.tgz","fileCount":46,"unpackedSize":899090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee810CRA9TVsSAnZWagAAiVsP/ijyH3qgCAh+kb6low0E\nbDzf4a+ctgmVPe/5N+yGsOcOUjGrii0NQYBAeAcXhlBweER6Tlci5oAnif9V\nQ6Ufnyj28Y17G39brgd82qiMeEjepcGNpT+NI7WsO86aLOBgCfNMfzT9yAfz\nrn40wydkaNAzdXsk8CWp3jkNVnoEvZNDmg81fNrJIXc58w9O0SwU9csWYyG9\nrZ++TwkCBqRrDtp1HEwQlwhcaXk/v5lrjqKRMm4MeEILRx6JWn1YO2woRh16\n7CuiScDru9ehJuX5qpOmPo5PF13CA+3qysVNrQVZ4AXvLnCFY2aL8IRPrHCh\npCEp1+jqQ+xtLQMnw18uHVL/feMGSCK+70lrgDD6/JVNzhRifzqUl0AVvM7I\n08a0pfnQTZy31atuo+3s1jujv1T06BvsB/Eo80lhzMgs/8qNiIWDSzPU8aU4\ncmy4B6ptJvUz7dR4mWwuT/lJup8/IM1xufKm49+BFGePl2A6yGU2fTMzX5Fn\nhcMvBGvOIvS1X4BTopl7ynIHWUSt8ujLxEYHEUNmaRQYeht3eXDjjYcJXQn4\nY7J8apC6VHofrjtb8Rh9TgU5CUo/Bf/F6s3sB9/2E2Q8E/QrRq4RnYtUSBEk\nn2BeW6enK8eFoNuVwLJXChZBc1Z0ZVA5NXdCmESoedC9/sUH/hjtIqaL26xP\nkNk1\r\n=sf+K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqcecOUtmYP+2uq/CGJG0O8qf7k7lQmCS8BTqokM83LQIgeacTwmp4kO5wZmcH++lRYVJ8MYauGf88+eoWtJkj+Fk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.1e73da49.0_1585171828178_0.8306164510680938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-select","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.10af6cf39.0","@material/floating-label":"=6.0.0-canary.10af6cf39.0","@material/line-ripple":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-floating-label":"0.15.0-canary.bb6dfc5a.0","@material/mwc-icon":"0.15.0-canary.bb6dfc5a.0","@material/mwc-line-ripple":"0.15.0-canary.bb6dfc5a.0","@material/mwc-menu":"0.15.0-canary.bb6dfc5a.0","@material/mwc-notched-outline":"0.15.0-canary.bb6dfc5a.0","@material/select":"=6.0.0-canary.10af6cf39.0","@material/theme":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SpHDS6h2eAmO/OzYGk7ROGsqt3dq6DKPIx1ZK5HhlBNQNcrBIGFO6CbHJHUlj4LQw9iKnKtWTf0W52d2ahUxWA==","shasum":"b5eb1a382954c83544b542231b9cba6cdf8bc085","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":46,"unpackedSize":898062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVWZCRA9TVsSAnZWagAAn9QP/Axke6UM/8TIlz5K1BAe\n6JYYqb4EyGGrVsBM2Xl9TnvDFDz5kfxULzQ96I/Mj+MlAL7PsBQHwGu1X7OC\nxAKP+QzYEYYlB6+Tc50m2BowJEYx751zdO7Y8RAm8aZAPKlNN1rSMgSsiQF5\nqVRrKpBryWaTByckKvSQEI5WcPGhVCpPtszqr/Di5enBZS48iWJ6SFuCRHpZ\nbsXMJTfKsFnavByfxaxGivhCXchh7c7sMiX3hSFE52inrojD51s5VFnC5DZy\nZ+6VXC0MsR5gWspeYDCZ6/lZlHEz1ZSOHrcjLv1nmQ/uvd8jNhux4JWgEv2K\np7Xz2MKJyHI/+xHXH3//QrE/HKo0FQ1KPgEvUchcD5pSwFOAVrzE1gkOIvK2\nEn5UuQ3oUATQFCGd+ziM1Ib7qJNobctHQbokN0xl0AR3GYGXyPPQJflHoXxE\npC+4BXHBSd0fF6k95w1OW5QNctdGXvonihdqejo8zCJ5WzyNz/w4JamA3riB\ntPIFkMs6cPyIp7J/nljuBHBn4M4LYo0Uxu0iLYOCaA0nFLwyU0He0YLtBNe/\nGM6ZDbQSF9zsd5MG7qiNwcfvLnD4shJcPBfSvbXNHY0jU2PSoUKFvXoDRnaa\ncKqgkUWk7Fr9bSmAWZQEh/KwDo0LzcsiDExqk1SaDpP47sVrANHuoBpRC0l9\nwFmG\r\n=ADWy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDPFte9kiarcA3zo4VM08g16I+rzlsFhAEhmFgGsxbmSAiBBcggedF5etkBqr5UMrwZcFIEifTFoXYtZJifhVdoG8g=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.bb6dfc5a.0_1585272217393_0.9516782518049838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-select","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.10af6cf39.0","@material/floating-label":"=6.0.0-canary.10af6cf39.0","@material/line-ripple":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-floating-label":"0.15.0-canary.1884603d.0","@material/mwc-icon":"0.15.0-canary.1884603d.0","@material/mwc-line-ripple":"0.15.0-canary.1884603d.0","@material/mwc-menu":"0.15.0-canary.1884603d.0","@material/mwc-notched-outline":"0.15.0-canary.1884603d.0","@material/select":"=6.0.0-canary.10af6cf39.0","@material/theme":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zxVkOml1dg8rBApenTxRiluux/pb7c814ci6TZwQQfwOVoX1aCEyRvEFSbvHG8vUYI5yb141z9nQsKHZkjUoBg==","shasum":"294b2d491e9de42af1b10c167664d607e3b58070","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.1884603d.0.tgz","fileCount":46,"unpackedSize":898062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpXCRA9TVsSAnZWagAAvfcQAIHV0aBm5PZw6s3D7EHx\nRpiioOCnZ8w7gPK5jbH26NWsfhJkCy9DF0IgC6Vix0OspGKbtRHpEcLvY++u\n+45h0amThok0Q5/HTs6FAsFka1nSgaCiLAHKuPl4HYPJNXeCm7n7PK9AsG9c\nyH30W6838q9fqS+mKP2z5hVhtgBwThkdNn+gwaUq7kHb8jpXl2tzXApv73+4\nqDNWbflpWdX9LiM/+oiZZALe+LbtQZziEwdWh/Bib5b0842d7SAjCFefwKWv\nyzOD7gXnSiZX3n3pGCyFbMkdckHvbdg9J++HkNOZ0J0i8nxFQgsEfI0LPwK4\nq3i6rJixTb9JlAT/B2kVDKIDGWfyUHcuKgy6KCqIUhDHG8HqqO6AS0EmdFOQ\n2A2UL9ukTCLOTps0+5BO8qB+FZ+GBsDjikVH27xHX+Ejmo0gwv4mrpRTYy6w\nblszFfbMyPGsCSm14MJROs5jTdyWfJKg8hZfBrx38d7eRdCUUGzIX6eSDPfS\nTKr9xfauQYu5LU/9P8vIimhBk7zjSNnqrXGSst/BTWZEQW5YlEVIR9Mwwk7H\nCsYSARMUUWNuahuew8kft/vP7xxoQpfu6uXVEKZl5/JgPR35C8u5VoBluX4i\np2wnPQbGe61DG3LQFpK+7mt4MjIo9sszs1E/RGMHwJhzZ2TAJXt1TNsL2IeV\nJbgF\r\n=SpOi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2w0i0s/TtfL6sii4Cr/gRVeZH4pEQBFas0Dz6Xjj4yAiEAzcE09j7hjhPiAQJ0fwcAy3ug8G20gtoGj6qs8JzHJcI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.1884603d.0_1585338966789_0.01805819729818814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-select","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.d6315efe2.0","@material/floating-label":"=6.0.0-canary.d6315efe2.0","@material/line-ripple":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-floating-label":"0.15.0-canary.aff73cab.0","@material/mwc-icon":"0.15.0-canary.aff73cab.0","@material/mwc-line-ripple":"0.15.0-canary.aff73cab.0","@material/mwc-menu":"0.15.0-canary.aff73cab.0","@material/mwc-notched-outline":"0.15.0-canary.aff73cab.0","@material/select":"=6.0.0-canary.d6315efe2.0","@material/theme":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zsmIk7rjl+nYrSjgHlahyFnZwUvzzOOQWD8h8oMjcTz0/rfydH9WnMqAB59imuUFQqXWZ5y6Tq3mtqFHLEl5tA==","shasum":"20d41a44f7cf98ef12313f3d83d8d7f8dccea5ab","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.aff73cab.0.tgz","fileCount":46,"unpackedSize":898062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmzFCRA9TVsSAnZWagAAUQUP/jjQwgJEBXIwiFyR6t36\nmomT5WimahNdzHjpql3qfVvwMF3JYRMRgoAXmkgIAPQXVkSjKY/zPwiZ888j\nbb9ztGjUIp7Bs257Ywb/+ti0lU9IY0lK2+HulDPfzn2zbJ4PYKcT00Rpd78Y\nIw2iEf9t9Hej6fHhrEgAvo2LwrbJdo9i+t6IGUEm3xaAs0+VLCXiQgUKtBte\nDNcO1cSJnrUdGzJ6UpOoxVOvbMmZXCKmYcWyLWuzM0yf/EVRxJwY/AjO0b2s\nSLwYkUZCEIbJUv/rEQ5zCyCrLk2slbuPYNkLIg8SvyaPzjT7MZvn/tMWj0UH\n5cVLoHbKxPs+CB14K9N1uSWtz7PwLllzN0QxsV0s2nyNDmCWsU0XqW+7hMY1\nKQWCMWhrA8uIFSUbJATBXcWHIDz30hmV4Famx8qy1F7kitd9J3i73T5QM+p1\n6+wzbWb1qE5P9qdhqHF2bdDqFxi16FVtC7VqgQg/m7lAbHKgDi34D9PbmxS1\n+Oi/liUXUNt8K6RTDt1Yg3Vyf5H0KjN1paoNjJTQ72axllfczcarPWryQRuk\nCOdX+dPYAxKO6BYEWMXLiHTQvcyDUiSKdLkFcv6oZ/luPrAhtqKyzFf1Ni3N\nKvvN/SoLiEm8p0wXLpc1zBDM/o/QmlNAIgA/ktZg/xfkUzmc8eLje+s4lnJy\nkUXx\r\n=9uGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRQHDnbSE6AjLVjqalriEAS91reQW1m7Y8V3B9QashQAiEAt6CsUrhav58rxSv0oaRt9l5lirnsHCQ+PrOjQIxfcRU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.aff73cab.0_1585343684849_0.8584585244555087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-select","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.a3016368d.0","@material/floating-label":"=6.0.0-canary.a3016368d.0","@material/line-ripple":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-floating-label":"0.15.0-canary.63168f61.0","@material/mwc-icon":"0.15.0-canary.63168f61.0","@material/mwc-line-ripple":"0.15.0-canary.63168f61.0","@material/mwc-menu":"0.15.0-canary.63168f61.0","@material/mwc-notched-outline":"0.15.0-canary.63168f61.0","@material/select":"=6.0.0-canary.a3016368d.0","@material/theme":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-71kjoseiojzg2Ipa6v8m4I+qKe4Z8dgDT6HZVYhZ1hvxVfyr1fTgEpHDhvz05EKcF+yZcgOez75yKs2BFRTFPA==","shasum":"2b6e7ae54b0310fcabd7b69429ccefb52f724646","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.63168f61.0.tgz","fileCount":46,"unpackedSize":898062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gqCRA9TVsSAnZWagAAXFgP/1MiJhRwWR6k1SuBSsgK\nJHihnXvfop1oMdfGpJwqCgOM0FJDjDz8rdSUVIJ9S16CIN+8uu6sxqE4bYgf\njgkPhMjnB91wCMYO69aejlsot9OBIzRaWK3lCS0q7v6UUkcY17iXUhZ5uide\nj+QW+qOUOOxSAfuisLtH2R+nG+fVTHC5lNCJUNryTZ6pVnEU2Ruditdh49GO\nmBwsMWp9k6oPHjl2kZDSr4hXhI+SWCX0LnkMVoWdjCiRzU1U06bsMm1mG3Tu\nsYMchVquy6jxEi3E77MT/McHffWSv8V1zvsoZbBlbsLNT2qvdQUPJopJC/rS\nn9h7zt5eXmqExIAw+p4HsdY87Q4Ov4DQIBsBvlbPEQbR/gI2steo+G1jSCB+\nHpxgkQD252erGfOpUHGR5ApL+FKKrow6tChNrsdX5KTxXmzp4YwbrN8onUYS\nH33uL732LY14vFFFgis49ZmjFJ/VI04P/5L2hLvZ7BukRM2VBFbFfLVW+8EL\nkOAf0I+ZBrob6rUtLh6BrKeSjtFPDdF8vBVui2qZ38y5+F7TBizQdYE7HLji\nSKQJMBng5Q/NTwNqGMWZuyd8NF2x/FNil2w/HuDXg4Dv6Rkqx/w0lvpb0OnX\ngIx0ctI1Ge5C7QChLPyLXRhai/UI97+CBFZ3OCruux5FU3iuTV7ZfkVi0iiy\nC6hF\r\n=CkYs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDljBaJhNViamO7xcu5jOiKZhaJIOpX2JINAjWJmJTN6AiEAg80TPx2/mzb9ZWQyhCcnOyWjAX2iYY8MDnx1dBodynk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.63168f61.0_1585678377736_0.7192644359677887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-select","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.4b45b6620.0","@material/floating-label":"=6.0.0-canary.4b45b6620.0","@material/line-ripple":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-floating-label":"0.15.0-canary.9fb79b3e.0","@material/mwc-icon":"0.15.0-canary.9fb79b3e.0","@material/mwc-line-ripple":"0.15.0-canary.9fb79b3e.0","@material/mwc-menu":"0.15.0-canary.9fb79b3e.0","@material/mwc-notched-outline":"0.15.0-canary.9fb79b3e.0","@material/select":"=6.0.0-canary.4b45b6620.0","@material/theme":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+CFvg4DUS18pWmXV/thIuB6XeXna9mpC6X3vmzXt0ZiLmmSM4fJAFTGDQeWFOA+unO2G7kz3KH6m9qvJkZXofw==","shasum":"9b85666de70f7619ee09bd30f305b0d912acbda4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.9fb79b3e.0.tgz","fileCount":46,"unpackedSize":898062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QyCRA9TVsSAnZWagAAi9gP/RuciEmfc86o3amuiBEB\nyDwiQ+MNgs/BD50z3PV9z1YyLSLD+0XRcLdJua8XT8Hxkv9WDaJ2lq3jLLHZ\n8ChgG0yns8HuXp59Ir8f5uY6oRfQxBa7hrNG8Lnh2qMKbLzeCtVu7OC+7P4k\nCEtxWjUCCSoJ2yhAOVnlosHBgM0NsswGHCSTqcUxZzIfJnRDv/1DCnS/Za/j\npc5VsDi2T0pNURRA+n0PI+T1gNCly+nwyU8Tc21PW4KNvrab+d2GhY3OWYm8\nHcYqrTB+YXfde5AzrYkJXCFpHt3XMRLnQhUeLCxqxXIZxHix+JFPr1gua4B7\nxflRPVmjzNiGV6a1LNA7+L7DO2AEG2OCYWuCTjDbzw7OyYu6aiKPv8kdh1fN\n8Zvg3AA/zbIUKkEVzNiNlNGUjQr6HUAinM2zdlN2QPdcjyjB1VzjsJqbhmjQ\nKIHcX90CR7nnVLyFdmAwNM40U0Seq11w2OMg3Zv3f5tSJU5I8ByOag1Q3AMk\ns7p8/FVR+wrgDEOk3A9EmbE+OaGd4PWmR6pN/eySP8RSeFL8NsCTqMgLB+SQ\nt5bJQ2N4nYb7CnWJBTJ0VVGTxL6u2pO0tzhbqkHig0/GNywcWWoOwHNvhcRT\nqtWvr0mdyvl8QCy7USp7DLdywq6WRBG5WB7NqF2yMKpycGDxKfYmwCot2nDW\nKQ1z\r\n=YApq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFfKGWdBE+xDHk+/yqY1ZEnnJ+p41jMwWGc25C+K6oo3AiBpHRWeEnJ7G7qmVzhSfSY7dBSYPgfyXwjzc+48vVXtxw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.9fb79b3e.0_1585689649690_0.5166711562003512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-select","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.4b45b6620.0","@material/floating-label":"=6.0.0-canary.4b45b6620.0","@material/line-ripple":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-floating-label":"0.15.0-canary.9bd3e9e2.0","@material/mwc-icon":"0.15.0-canary.9bd3e9e2.0","@material/mwc-line-ripple":"0.15.0-canary.9bd3e9e2.0","@material/mwc-menu":"0.15.0-canary.9bd3e9e2.0","@material/mwc-notched-outline":"0.15.0-canary.9bd3e9e2.0","@material/select":"=6.0.0-canary.4b45b6620.0","@material/theme":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dmGoImERD/6G1X+U6iMJSNoCk+T1LEYOSUD1hqXNByJs3J9W1/Fnh1ZtCkHthdcowrXo45wp18aJFXfFfTfwOg==","shasum":"df37934432719fbe851998d5df47e30383213fd7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":46,"unpackedSize":898062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91pCRA9TVsSAnZWagAAR/QP/jh+zBtI3b+4OMDQAPUq\naEi/07Mtk+wmEc6qrQ+4YFqZhnFByAH2HFq6HBveFV6xdM0cbdVXpb6HWwAs\nyzSIe3fDEL7oPxEx8pEVZX6DOUTQluOSdVI5Be4vG37EQAu9XhJFV+sD9b+X\ni/IVjkcm1m+g8A0XvER54MGcBBGQt6nNPK91azYKeN7YYpCN0sZ7IIA71uru\n5JLYeemrG62tcAbK8Bl6wsYSLZfXKtuYXN+bjoiQOWkDLRKENTIwqqIJfKf0\njSMhimlMqjFxj83l2z8SJGd1PEXPx5ATbfgihdtzA0FfkdInfGt8L3n/uJr7\nKoGvPwu1EI0ro9OthZtk5aT6xd/Ji1CeIJNIJOWuwPZehYSE87O1mXYUcUa4\nzdj2+MS3bwqDzhqpubZIL662J3VfJSfM7nsYKX2NiChVK2Ku8N0CyjHSQwEW\nVZXR/hOE/kLrPkA0EJfpn8Iepc7CpLg+lQYvR1JrElFFx0HWp9TRoQqfz/Hx\nnSetC9VlWi4PCoZxJZukTTQjcqsJQwQvJ8G5F08LCpJ0KKAxgvF1J5F09Y8Y\n46CemkjIupOZuwFTFliHwvClDRzh0/kEQMD4KANzz7zZlHsA8qWU0Y72+yB1\ngefelbrI5/nx2n8Nk0sOBKHLsKUgtXzfuFapX18l0qpHFp5GFo5i5RfNEoDj\nKiYE\r\n=LihO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpGb+9mRn8+e3StiH+KGAQ3KRcUXfu/1fswaJCx+0KDgIgCNkyrihW7TgU/dYE+E8YvMLe59V9iacK3H9sCwh3pXc="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.9bd3e9e2.0_1585700201088_0.32684484512581435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-select","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.e84b9c8.0","@material/floating-label":"=6.0.0-canary.e84b9c8.0","@material/line-ripple":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-floating-label":"0.15.0-canary.072084ab.0","@material/mwc-icon":"0.15.0-canary.072084ab.0","@material/mwc-line-ripple":"0.15.0-canary.072084ab.0","@material/mwc-menu":"0.15.0-canary.072084ab.0","@material/mwc-notched-outline":"0.15.0-canary.072084ab.0","@material/select":"=6.0.0-canary.e84b9c8.0","@material/theme":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RJsA2OetF7UoPXptnACDxOsJmsPcWA2r1Sa+PVRU388XzlNAujpZi8sWru6sagimkRoUaHbpGnbGlvxWoaE4Xw==","shasum":"707df29ff4add6ef9bc707420d543ca799a8d307","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.072084ab.0.tgz","fileCount":46,"unpackedSize":898052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehOAjCRA9TVsSAnZWagAAz5MQAINISa60B4zX+Jyxxu/b\nFQlwZv37DEVc2MNOzWOod45plqkp9JSBzq/L3a6XILpdplzShTmY08RvcEAo\nvlEgCbSE/eSJWmtppr9jR5a2l5ElBTSrCR1iVFQ2r1H9s2V5hPu2gN8ZZI9u\nuNwbgUfV+D34S+TQIxPH8fbypfrYHXKqHwAWHZzRerRz+Ztaopa6FJb0GmNZ\nsFY+26xyS3Ql3VQFrqngpChdNxlRWlZkESO2uD3Es7CgzLvpGep+aj1vWzup\niTFO9WBq53U8YuH44sIazA4gPCA1z6M3uIBNmyB2vXiqt8g/5WthoALSO8nO\nggmq4UuJhGbM70EJPr81Dl3n8TdmGSMin58WKuDyl6oJCBXfOQDveI43vj7C\n1DqTC7VN03ayPtx0xusm61kkyxzEFHr/NGzgRfQIbaC/hwQFDQZQfgOjkNHD\nFt86c1Wf2uMfR4zRHEttVj+TrQoX4CjuhWqjFyKSj4+gP7+qqw3BDUS2i9Ac\nAI7uTvK9wDlbxnRwkng3z8eGfTIlWuXGQsmCij8vYc8YfICwlc2LQZOcFRF1\nC4mXhvdk7Zj+ShLpoR16nBZMf7rQZC3lq2uL6budU9pF4Lh9Rr03FQOfF0nB\noK2ePY9sH/Zf41D8QMl0gcO4MOamOnC6Q32eh68Gh+GImKmqCG5Z1dKg9aTu\ncW6q\r\n=qXrb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9B6CYT0rIjLSSJuOisOdvGiHa0xhb6qmp0RPqIYOF9QIgAV4tzhjSLhCzjv5+gGHEBQiWOUAgpDmcz4gU7euv0y8="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.072084ab.0_1585766434907_0.21607983306624523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-select","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.f1f8e60.0","@material/floating-label":"=6.0.0-canary.f1f8e60.0","@material/line-ripple":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-floating-label":"0.15.0-canary.4dec04af.0","@material/mwc-icon":"0.15.0-canary.4dec04af.0","@material/mwc-line-ripple":"0.15.0-canary.4dec04af.0","@material/mwc-menu":"0.15.0-canary.4dec04af.0","@material/mwc-notched-outline":"0.15.0-canary.4dec04af.0","@material/select":"=6.0.0-canary.f1f8e60.0","@material/theme":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-MRwyyAD3tMyrroMCdD1/m0Zzr6BnRCaaEsXKU+bQuOupPxf/I+o+dRcliEtclft7BlBrAyxaKu1yTRZ4W2wA+A==","shasum":"1fd792609d71a42ea2287efead7049ba0ad3954b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.4dec04af.0.tgz","fileCount":46,"unpackedSize":898052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zcCRA9TVsSAnZWagAAzb8P/0YvsDkWeMO9Rc/SbcK6\n9rQltaY5791HI23Sr0CyqATG5nhBXnx8kLO1PW6UHo0yagm5iugN2SWz+D5q\nsSx1JZv+qZjPhp29W2GBLYDkaPj7kx/nHFrFoEQ1lzeoGlwtQdV29QHb93Xf\nkoax36gpSj1drD94/HZMX5ieQ725qoKCQlBwK8tSmfvTrSrdpOFgpKoRj4p5\nbA10VmRQQ+MyPDnPEugau00XEU00TJOAX0f7o8NQeGpwH4S9WilNHXFuLoAB\nBUU4SIMvyQ3ijZCCmFIa/YWOtnOawgCneWJ/WWZ3TjtaOZUoOR/yPU/7XpuV\n+5HfeZMMrUqhwQKhC/5IFGnpVegyf++O6ng4f0g1SznEyf7VDf5YnKu78gbj\n8HfghjcJlAPGE7/c59zwORh+uzAsNAIgUxHBgRWHZxwdh2RReAlizQ+02bct\n9liSp2EfxXCzVhLJ1mq/ZRaf4ZVvPXlF81/E8kafM2k5Gdp1zWetRTJJ1Gq0\nUj+Yb9OagaWbHBLg9VCBzv+secE5wE44UiiTnBC/YX/Ohhisc0VbaXn+1rQI\n1cv2HDm/4FNUpNPTIQw8/+kjKV0xkO9Jx9KoD+JchGMZ7oSsaMoEpNNpTfcD\nN/7dwqN9d52Vi4+jTLJF/0nv5OTGxvXsI2GYY68JHrQRwMFSuphvAeO5qj+x\nmfgq\r\n=KMXi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwTO1cBdlypFHgWOM+AYykl6t5SIpRfieRAZg1FK/ZdAIgIhupqpBdm6FySSwV5xjr/+5x8tH6bQxGYPV/R0iyLMs="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.4dec04af.0_1585945819864_0.6104844079663241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-select","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.e84b9c8.0","@material/floating-label":"=6.0.0-canary.e84b9c8.0","@material/line-ripple":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-floating-label":"0.15.0-canary.9b676354.0","@material/mwc-icon":"0.15.0-canary.9b676354.0","@material/mwc-line-ripple":"0.15.0-canary.9b676354.0","@material/mwc-menu":"0.15.0-canary.9b676354.0","@material/mwc-notched-outline":"0.15.0-canary.9b676354.0","@material/select":"=6.0.0-canary.e84b9c8.0","@material/theme":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rT8/qcFslYkTIvOK0I8SHFcm9V9NANxxVmVIavsyUYJBjZyeyvz3E1niVF0uXXrXvO2GGv0BwU/+Aee96KjkVQ==","shasum":"4b6f2eb34dd9af04b275ce822a72dad9ddf4878e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.9b676354.0.tgz","fileCount":46,"unpackedSize":898052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5ztCRA9TVsSAnZWagAAZvcP/3ERjSjE/XzBZNzg9kQx\ndxWlAHhqRuYF8NNFutfxrGVBhfxD2unbxfiOsxp4fz3ekRQHswPN96U/xw9e\nDsGCFVUzsO3aPUfhmIi6lnhOgyOzivARwxKnHw5vfZXG9iy8R4HjYdwDP22/\n+0QgGbh9gR1gckWd1ftIj5j6lBbq3aSj+mVWH9ziOBLL1PKF62G3fad4kMzJ\nm5IXBkJqTNRijybZ7zeUOiN94t5rPsCkkro49pu51aiXzBGuZGIhBdfPURSe\nuQk+lSZV6EhXcS52lulb3BGIt6X4uqkQgSpmd/BKSO7ggfoDnF+L3AM0QH8O\nLb7mZZc3rfjAeSlbu48DOI/SyiRKQJXK7J5NaJyRkV8VIId4o6WuoardqPlO\nEeZp1yqxUEQJzOR0/ark94MvWeLfyK8mnZj6DneVmkhtrTjDru0Ll3k6Gi3v\nN8EA2lZ4JX31TkIwvo1eeacrmdHYlVVcBjm4b0obcy9sZ69tP9jh/6Lu+D6+\nDir5D3nQ0pPa7VJ8sMUeRRrAgk2N9HK1cRvSj/1B3HQ/NtJv5/YhTlila1M3\nGkZz88odSCmyCBQLdA2US0AKX7+bP180GJ5Fmulc084p+wTS/x4a0azEsdEd\nqmE8HdINFUocebXbouqe0lcIWjPuWZzGDMtM9HhW7MnchArO3RJbE2KOFuUG\n0BDc\r\n=zJl4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZ1cVnAf6ocWXGrj2v5SZfa6OCoTMSeVMvtkwXAfFQaAiA2SU/fr5X7XZaX+a3Q7xfzAGO4dPfNbctTfP4q11Gldw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.9b676354.0_1585945836640_0.21045663222858524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-select","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.f1f8e60.0","@material/floating-label":"=6.0.0-canary.f1f8e60.0","@material/line-ripple":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-floating-label":"0.15.0-canary.6b946095.0","@material/mwc-icon":"0.15.0-canary.6b946095.0","@material/mwc-line-ripple":"0.15.0-canary.6b946095.0","@material/mwc-menu":"0.15.0-canary.6b946095.0","@material/mwc-notched-outline":"0.15.0-canary.6b946095.0","@material/select":"=6.0.0-canary.f1f8e60.0","@material/theme":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-c8QYprerkqZ+kfyoCL20GhWT+8pZw/foYxDQPOx2LmczqDLOp/KuDxS3dyQdfRuPS5NDfPh1R4r/wpWXjBfeJg==","shasum":"5eecba0728b6bb24508651ee56bfb61f445ba035","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.6b946095.0.tgz","fileCount":46,"unpackedSize":897990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mXCRA9TVsSAnZWagAAqw4P/0HC1iAL9OHYGbIFAxXu\nWkIkAl0vtBcS6M4jmlcYS9gKcsFLVVUTi+JHvvVZbRggXG548lUTMdPESrmI\nDxVlCjaS4IlSy1vbpcdEdoF96i+SpQ2lQ5nmZxYm8vSXYfnNQnXKzSHHIG9c\nwg7U37ayEOb/8h0MOdHOdFA8GgfCyN00DRk1X0JxXjK5HYpctYQd96qvyXsv\nsRB5VeMGgzcMXGG4LcfYiJ6sPsIOlkuv+KLOXhkng49tdFvfpCsZ0tum6Wq+\nElroXx6gZFVnZQCu4hopu8qi+VSudbv1r/TRtwyBgfTNEiFLXc61hVoReeKx\nq9E8rZKGY4WNkYz0Ti6ZXV46IUDu2IMNEfPtC7jyj+37miJ7L8YVKJUGCl3H\nZ+bGtnMfd7VCsEUrQ4MzIkQG4fyzQScT+68GN6m9xxerVZDAGXXin5yLJVdw\ny8nZkobVFv8rkwKQIo3fHZQp2fluf3QGYgL7BX7f8I/pOzR97mgdcsde62No\nrrGrv5Gb+e2WXVPWgvqoQKhgUsMkLoxNXIogAeIo4jX9iLWcMLbVx6N9jvn5\nTrzr5GYok1cbFjMzkrlb1oEUkvQ5wTRq8K8hxcsmWzSmiUv4D2u3jmj7TSeR\nkXiWVyuXgcx4gwJTEw3cQT3RmoQJDc9hQJNW7nnzdaQp3BPm1Ri7CanI0gtq\n7Msv\r\n=eDzW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBdnT7wZzdOPIXNCrM7oHIYQOIP1+dvM60f5Yj1BNuQ8AiEAuRPUN5apLPWeYeSEIIXWDunzSO9uSxRXcjVWjP0PQAQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.6b946095.0_1585949079296_0.38777266183308257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-select","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-floating-label":"0.15.0-canary.5ccbfaa2.0","@material/mwc-icon":"0.15.0-canary.5ccbfaa2.0","@material/mwc-line-ripple":"0.15.0-canary.5ccbfaa2.0","@material/mwc-menu":"0.15.0-canary.5ccbfaa2.0","@material/mwc-notched-outline":"0.15.0-canary.5ccbfaa2.0","@material/select":"=6.0.0-canary.6a40ef217.0","@material/theme":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-d6J04ydq4INajQ3w50/VXCkS9qlLj79Qu2vrt44JPYI15PBHmQonULUFL8pxXV18UtJ5yGl+C16F0V/wuiPu6g==","shasum":"bbd8f522dd43fd3d6b2b5054c4bcaf3161384d43","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":46,"unpackedSize":898000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rsCRA9TVsSAnZWagAAlSoQAI/VQSkxRX9nX3+1QH9m\nOUv6IHgK1Q+NvoyIeFhuj/lfIFPzDhX+mLkmNTtc4znrDUWJcNgIULlgJBlm\nBkrTCr8+zOZ/lpYy2IUZvfiUgXN9zeeK81tgBvpfcDyuLhI81pSn7VAFn+eG\nYsHm25xd6jYTclEi9U5Evbjtcf0TJabfNFoSYbsjcwWQOKiPOF/wjXUbHeKI\nghb1IoQI8AiqoenqSdxSSk9hK6E7cOlmUYo5vBPRRBFSN1+PQpz1dYdl6PgZ\nluyEW2nNWZ4Xxd2aCAweGC8d0HgFTZyWAHutmA9PjFWUo+3B8hy9e2qTEVHv\nhBEY2QpmfHPUcMEFoSNFen3Br9qJD4KMwus4H4qXS5BhZZ5Kdc7cwVTVjjSb\nd7SyNHlNT1Ip+NJT5xG5kdkY281pVUea42dvc8gginFdLcNagn/PtJsNwQS6\nqDWK8r9K36dr+yrGbpaJ5Ovzp+UYPZs1e1jYsm1GrgwchRDwte0/pdAYOKhk\nhrGp3E1ETagXmO0NIjaPzHAAFbHKwKmtjcDsVE4N0xvShjKHGAKFxjOSDm5d\ntTwh7nd/f0IKtMMANIDcd51zt8ddgcL5ajkJAAPq6n+ULtmA8AG/GUYKPQ+i\nDYWKkszY/hEt+e/oqBi8VXVoO/oPiIJUu6/jpr57LB82KSRVDzlt957UeBbA\nq8kB\r\n=52+4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2dMAEz61y9UF0cbkuCahE60qn8qJpmZ34OYDDcmsMPAiBrX+S0Gheb0R4Z7aXnkjxQ2tNjXsiHexCF8eBuUBRenA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.5ccbfaa2.0_1585949420372_0.6996496499110658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-select","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-floating-label":"0.15.0-canary.a0ab8772.0","@material/mwc-icon":"0.15.0-canary.a0ab8772.0","@material/mwc-line-ripple":"0.15.0-canary.a0ab8772.0","@material/mwc-menu":"0.15.0-canary.a0ab8772.0","@material/mwc-notched-outline":"0.15.0-canary.a0ab8772.0","@material/select":"=6.0.0-canary.6a40ef217.0","@material/theme":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3Ru/vIUlZpbIjPKiL2dDy4vkT+4tFw4e+oJ3RR7WW2ssIem9RD3WY11UD+xKFYlppD4tMli7/1lqSLRP2RZt+Q==","shasum":"051862a98a3f0cddc31dd4ce3e6b97b97b19289b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.a0ab8772.0.tgz","fileCount":46,"unpackedSize":898000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3xCRA9TVsSAnZWagAApjYP/3/PcX1JLMj/Z/IH/ES8\naRa8np3bWEjw0zhVAtN0/LX6VeRS8z1eLH6yJDbdHsI0cH/nw8CXLfggrET4\ncwC77Howe1ZHgBuZ9d3T1FHQYBn/LEImmLui6Dm/6lC31DdwWcWGHOLHIwuS\n9/G+PlcdsKDQTs5/Brcp5y6+kKgixeaTOJfsHS0pBB5cM0gqt/77ZtuEfThQ\nta4JkgNfd7+SUeGo7zsqUyZp80w6OuYo5XWc9ON4BYsTA594aDPObKWtVn76\n8cr5x3MVXHF6dfkUuqMBKuMyVYrzh6jSFj+8aYFLBjXmVIOyraLT7kplE7dw\n8G1cx0E/9WLFIYHBfyHcxNPv+P+aXoklVlQls7HGJHXwF53WmzU0GkHNOKtf\nG+UKMJpwBBkmXFUkLDj9Vd7k9d/2kWGRJ+mnpZVX78ILCDUiWjQ3ANcxu4Q9\nYeHdPOU1jem5lv6t9Or2SSUENr2Ba+3y4dlmH8KPph1WswfdoMJOJxCmHsgq\ntsEq8aTeRNhQnqObu0EHUqViLFG1gWdLwPF1HKv4b82kRdQ9daFsk/OoYEYr\nyXPVczxsS0wD30Or/JBud+QzziN/jUNCm1agVpXYaSvRG16qdN+arNp4+svC\n2mFM38uOEvN4W/ai+8mMUb6cpQnl27l12EZr5NnP3XP990R/1ENtDF4xTAbE\nCSr4\r\n=Ss7+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqOary4WCPf9WWY/uAjsrtQ5vb+7P+lWXouaIc3x+8DwIgRHDX2HMbnjdEyFZ/ijx50C0z1HNResVlWXWo4K/wp6I="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.a0ab8772.0_1586290160958_0.4138662212423767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-select","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-floating-label":"0.15.0-canary.8d352305.0","@material/mwc-icon":"0.15.0-canary.8d352305.0","@material/mwc-line-ripple":"0.15.0-canary.8d352305.0","@material/mwc-menu":"0.15.0-canary.8d352305.0","@material/mwc-notched-outline":"0.15.0-canary.8d352305.0","@material/select":"=6.0.0-canary.6a40ef217.0","@material/theme":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-nu68gwmhRUcJSX/moKJspmMehZ+xhlrC4rELIwmqKhLaKWz4CtbmCmU/yFfRM4NguoL6hCkXwTUn09k1e/Asww==","shasum":"46f2884322b2f2e8dc1e0694471fc71e59c5dd56","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.8d352305.0.tgz","fileCount":46,"unpackedSize":898000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPPMCRA9TVsSAnZWagAA+/AP+we7cTJXpZBI6BhNJt2n\n+D7qe3CR/JgFYSXLUCyfeWJ+fPI/4QXZooWbNcHOcs4Ykl8aYT3B9gEUjxWm\nowTQVz+l3onmfVUsX04VavssqhlTmnQDgpLyQ4rtqRSRXFd+DjT/B6ueU52d\nHnc2hgmipOvJI7eB1fswFCvcYnP+i2wlf2u24JnGf6TwUV2xcQRBfdJ/dONt\nxVB4whGPJaiuGKUlARxxrDtcHUnmcOdBCgsJoHZGFnNJTSUYhJaDf+DD7X0p\nZ6mlPcjUSbnMJty8VHW2c5p9BlRAn790OLN0csL+ptOzTUlboIdzmUqVyPG+\n0Tuak6Wlt0lWsz79cdPvb3weUZ78MO+z7iK+LFCUzq+9aWRRRI1lkPTTf+d+\nwL+RtW5cbJCPPLXnP46YxLm4ApHDnHqK/1dhnbYuDw2Fi6x871e895qLlR2C\nIoy0anC4or5CccLZ9hRMr8jAQ3C4NvBBx9ok7ov2oNOFi3zlIZgBh8sOd2eH\nWaDDklxDafBO7XebVvu943GDLqD5r6I4y0UK6X5Ezot07hHaFcRRA9Jmy/fi\nC8dCytIOJb60TxAwRF4MNO0/XEM4WZBibMfvF8mT7r7ZsmcrtZPnvmQeIqMA\noZ6vM1h0sgKOejXVUSMRgAkO5gKSD4J5VZzThqGVfOlgdFEYvGGv0+sNWBZi\ntCJP\r\n=UAvT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB4URCElY3RzUrSZKr33+TfAI7toBF5TDM0ycx7CgjCQAiByP79VkVVw7rceLo2QayKboH9fwVbLkVzmp7i5oXMWZg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.8d352305.0_1586295755762_0.21787904063358865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-select","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-floating-label":"0.15.0-canary.31eac79f.0","@material/mwc-icon":"0.15.0-canary.31eac79f.0","@material/mwc-line-ripple":"0.15.0-canary.31eac79f.0","@material/mwc-menu":"0.15.0-canary.31eac79f.0","@material/mwc-notched-outline":"0.15.0-canary.31eac79f.0","@material/select":"=6.0.0-canary.6a40ef217.0","@material/theme":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gxZrK/BPGxwrY4Ue4CMQHghYp9ER6z5yZAXdrtOivw2N3FBR1AOwrCW73WNUj9334rnXF/UqZvU1jptjtA1kTw==","shasum":"96d0d183e55abd295ea471d22361c20c727d53c1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.31eac79f.0.tgz","fileCount":46,"unpackedSize":898000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdhCRA9TVsSAnZWagAAYvkP/iT5W0vboiXXDLycYOIs\nCyf2k7CYwdS0MGjYHlPNt1RrGB5o0Oo5ylGtUSms42ORYmgXTVToY9ba8PVT\n9ijDGEwu2S5GNJxJTxaEc8f9MfAVkJ9OcLxO6fsQ2xbkJufNPMqRYk2oLZon\nVfJHhi754QBkiADPGW3WK1gOxL7wOsF7XZrzMlQg2yD7TEv2U8uGbhl0A5Rm\nbc/vIH9LBfcguA0pb5azX8GA1/DKhcMhN5UP5HprXgQ+/KGCY3gROcxg3YQz\nIq8/WGv5NGZ9ml+O2dZJYxYrhxKL7MWMWsY8/+6SgX+GDkeRvNlioY6XCRiY\n8KpNYYhUeHv8uil+fvLJ8NKpxxjelCwInK6jz2Hi3EmhMvSJ70oBlXUHZ2N6\nTq16XQnjNaJa2hzA8LQ4MI4JmM+7LuhfQFD65+ekA3YsP/vvhgWFKFz9CmiP\nw76DYrLJ6eHBfNwKZmarveO42QH8tMJxiBWLHtKvRDuzunZrPFxaukAyjh11\nCYpJUrv2MEUgQxLbf2MKiWfwE2YTxfGTcbgAKbqm5kldiJkc6TRsKsdAnTMe\nobv5oRlm3tQOs7+dXdQweijLC/aalbYf8Vg4FC2FPQYaWY8+JzYyXKjXa4iO\n2xiSKPxG76pswxpn4vzAESPTMGNPfPAz/EGNNuHj0OPsMVtcBcq/jvefNSfG\ngUrb\r\n=pt65\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsBDrde+R+T/O+Knc22nz2ovZ4u8glowu6n3k0PYTvlQIhAImELtrh3SaD8w6xZaSNFU/bg52BAjwcCeKwYURMFU7/"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.31eac79f.0_1586296672860_0.7525057649723847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-select","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-floating-label":"0.15.0-canary.ba05565e.0","@material/mwc-icon":"0.15.0-canary.ba05565e.0","@material/mwc-line-ripple":"0.15.0-canary.ba05565e.0","@material/mwc-menu":"0.15.0-canary.ba05565e.0","@material/mwc-notched-outline":"0.15.0-canary.ba05565e.0","@material/select":"=6.0.0-canary.6a40ef217.0","@material/theme":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-be56uhrvGwJintmWYfT3SV5WSaEt9xAY40wOZv3QpQnFQqiGZj0mb00D6OdDICNbqWvolYteXC4DMF33+UakNw==","shasum":"8eedbd12c9a3bd9237077870fa998be904d444c0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.ba05565e.0.tgz","fileCount":46,"unpackedSize":898000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgrSCRA9TVsSAnZWagAA3/4P/1/HZi74JEqD4oiYYhAE\nHOHBbFOC/10HB1mrN3894OJ9poJv+a3OH3DImtwRZJuI4cyI6RUo6xkswwSi\nact8hcrFzvVYHCsMaEvPXVhYCBomPvDIFqehwx+bV4dMJmVXhaoNLhyFw+Fu\nLcHuSoatUqF1Q90ZmtnEJl4s9nZdLagwgYI9EYlGJ2Z7pV4mYaOLeG0XFUc3\nfEOWHIiU6rrksOXCt98s6Vg/xW8n223q0zrGW2sW6y+qIYSNjdX8VJeaq2oM\n51XWC1jSX7FCPvJfgVKQvWt/0B3/5etFivdMk9Cr9afPiyoFrZ1qkoY0pfsW\nyak8iMq3GN+n9Ba20WuJRpuFZMAQbGxlhd1Ahxlxex3Px7lRd0+WSesBvAzX\nRyuW+V/zcVlZOYADsGKJNmXezCujB9z0b+xR6qwEuJLD6vCkjI9p1TSWhw1a\nIeL9GYo+8aduWyGbmgqH0KrXsQoANFF8Q9vkmeLopjNBVJ5IrcpJUQ7sdxWr\nPpIcjX9CzXYDi/aIaeIQcM8s8ruiLC5czqcX3CWj7IAP/DkFD5Qfvds1fX0j\n2qvDxOgQZTXzfPD8WUQKZlHmOzYb71N2u5NaynRXg5qNKHRnjRM4X9mU2nQN\nXDfRIcVYJhLUhm92LbegYaj+fb1FKAGesdhr5z6z1BcCkSCh6sEjws3UhVsx\n49Ww\r\n=qQFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/h/kqrKanLcmg4+Vw7paURSFmHdf3IFPbtBM3N1c5fAIhAIZxWHuG4TaKQYrAptDOqr1aKjyFcXiFq2pzCsjroRks"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.ba05565e.0_1586367185677_0.40644301783504666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-select","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9930d9cc5.0","@material/floating-label":"=6.0.0-canary.9930d9cc5.0","@material/line-ripple":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-floating-label":"0.15.0-canary.25099f79.0","@material/mwc-icon":"0.15.0-canary.25099f79.0","@material/mwc-line-ripple":"0.15.0-canary.25099f79.0","@material/mwc-menu":"0.15.0-canary.25099f79.0","@material/mwc-notched-outline":"0.15.0-canary.25099f79.0","@material/select":"=6.0.0-canary.9930d9cc5.0","@material/theme":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-cZxk3lkVzhvXb1TOlnKXo2WeUvdo/XBHJbCdRigiIRpS6kA7ME6go17I1lPYbJly7QAHFclDNOFtP3AcUytqCQ==","shasum":"18eed431b9bcf504e7bf553a7feed9e284eccd94","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.25099f79.0.tgz","fileCount":46,"unpackedSize":897694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKcCRA9TVsSAnZWagAANUUP/0QHJ4LzayrEvnlNNr8x\nRGIlWVx8jA/fqaTBvkGte+dlkCu/G9N+yhNOFzfdUnRS7ud1UrznWxh2jiI1\njbMamMhxEiI/q6QUk2jay/mtoMOkuWenfB5Vhb5yTrl/oxveMq6nBl9nVPk5\neWNvSYEmX0YtcLkfV0HE+s0W9O0hpcX48dhHq9MWhGktobv4eiSJpApBKN32\nf7VmRpeVCVarLs62Cs7qW6C8+MdSD6+LVE7OFjaz/jPEvpbAXfEyb6y8rpD2\nqmwESKXt/1zaye1XiWcevjINww+E+mobAH921BRk2b0llgwmg99oLvicq5OU\nsKUY4a5yO5b9+KUXMv6cjgLNnZyWQxinbSCzRm1Amp+1XIRVFZU0Fwu1hCkc\nZIlF0u7czQjlJNgfkOik1GxYOb99QXO1M/m+S6V5RULTO98oeP09yD4+n5Rk\nrji5b6FsWRLLfal5OezelaBKth+vS5sSg7pRWFi0l4SVRdCBb8KT1AnyPsKQ\n5BfryOJIqUl8Hf/uQ7xyfP1vRZd6SMVuPKNIhoXniP/1IUfOIy71qceJjwq7\nhfXBMnIJGb0IrPseAxVIB68GFGh+QpwyWq4wMxSwuycz6oCC0NoNQ1uFGqjc\nLnU2pVoeGFNiJy5N8lPC7NAfgGwzWI6Mu3Yh8ojtIjbubq/4AO2spUutXRoZ\nSMkq\r\n=azA6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDT0M5dCU/mYkPtJ+8xQdUWmkWNm68DGBNlFNOJZtHoPQIhAMyuKKHoGiLaHmG2Uf3a9kK/j//Yv/TfN7mNW8fAzfjf"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.25099f79.0_1586381468247_0.8538989768784617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-select","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9930d9cc5.0","@material/floating-label":"=6.0.0-canary.9930d9cc5.0","@material/line-ripple":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-floating-label":"0.15.0-canary.447e31c6.0","@material/mwc-icon":"0.15.0-canary.447e31c6.0","@material/mwc-line-ripple":"0.15.0-canary.447e31c6.0","@material/mwc-menu":"0.15.0-canary.447e31c6.0","@material/mwc-notched-outline":"0.15.0-canary.447e31c6.0","@material/select":"=6.0.0-canary.9930d9cc5.0","@material/theme":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-fLCZA2EaEjdOP+fcX2P7ITTh+JZIL5cCIVWi/ngKHIeDSfuZOrLmROwvhJsaVeORQ2nI78m16Ob889zYRh6vSw==","shasum":"f9388e18736ef9cbbefc61de192e9c013ca85c9e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.447e31c6.0.tgz","fileCount":46,"unpackedSize":897694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnePCRA9TVsSAnZWagAALpYQAIWbJgAZ+J55WIvdPXIH\n2f/oxEAigJju5p8Oy1tp/cqIzLE1cbkvah9pqIjXRC2dsHhZ/PSWeV03GIzn\nAe15Hspzr5aqy6TD8SCqV5YuxnQyrtK57XlMw1QB5lvr9pvJHxsH4q/dc6iM\nsBmKabQAPZDdgjCayhxwPazlBH+lj3G1yPDlGNRuYFxnTmWUr5gcsrzLhWJj\nxdIcskq7BB3zIqTolSBHk/gn1cejq5qUbpv8jyFVt72Sne1vbycDE4cB/gY5\nDiTLlTPo3qpxNGUpmiOVdWe7ofJM8csVDjcjScZFHv/TCXh0SHaSSMpFs2mD\noLQ+2qs8xnTxXdxLyuFFbK2TH3dNwaTJOFXOl2dXLqcxUUHufb4DApn5PNzv\nQRLxCCjb1EcEnSNSnp7grzV57JjXRSHXby+UfUW4S5ZIuOeOdt1GiclifYPi\nGRPWB5gzF2SZPkOVWfQDiYt6L2DzFHj0MJfAyv13tD22ObAuT8BTBUGnh66X\nZ+37BY4johXw3F3QgU8eb1OmXkhYAzkLTMBS71pr33P0+1DkzLg8fXyuLUOG\neHJgr9fPDcngNPHITXaNX2NV6vCM6O1Lzjpuh9Kyig8Nu8HqNIaFa9mZLYtW\np9KgCtRtM8c2TEzGfJUpKRa8zntQBx5HO6uqumtGxown9I9CbtMVuMZG1E68\n0upm\r\n=uiBi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3d5sNOuUOcYVi2+f+LoZ4Z/+sat0tERGp6zUcDfznlwIhAKgLInrZx6AfX7pgKsqMbUb/nNnj8ZaOQOmuge9Tvr41"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.447e31c6.0_1586395022577_0.25529441535392383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-select","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.05f5e1583.0","@material/floating-label":"=6.0.0-canary.05f5e1583.0","@material/line-ripple":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-floating-label":"0.15.0-canary.d6dd84f7.0","@material/mwc-icon":"0.15.0-canary.d6dd84f7.0","@material/mwc-line-ripple":"0.15.0-canary.d6dd84f7.0","@material/mwc-menu":"0.15.0-canary.d6dd84f7.0","@material/mwc-notched-outline":"0.15.0-canary.d6dd84f7.0","@material/select":"=6.0.0-canary.05f5e1583.0","@material/theme":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-raI40W36nJeqKMsGshnr1PPSly84IKCHoL+6GqFDd+F+w9QtAzioiipcl1Sq+0Q/7302BU8a5Prorh0CZ308dQ==","shasum":"89645c6194ebba5964ed1af9487a3f4bf1743363","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.d6dd84f7.0.tgz","fileCount":46,"unpackedSize":897694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnmSCRA9TVsSAnZWagAABmsP/3htOsKZZ/4J1N7M7BvX\noDlqSxFGv4TdQX7hUd2DwpqfiN1JfrLrxuTV9YFU3ETtQBv4U+I2NHXPVu5y\nZ9j3qX4cLdeo91O1PNXCDTqSDYAxZEfA+Hxx7hW7vV7szypERIimIffad3r5\naO7BDtQdcSPY+wrMTTVB6XIkrtusHWYGJzRWX9vBch/d+W49lNnZPMzOpAeE\nx1RQJ6eVEAVisZQSHJQ8MuXmz0aKdnQBUINKFHyTyCoObHzHCySI2q6Iyz0K\nkPDpBC93/p2CcNxWsXLOFkvCHvWkVYHgniRX0e2sBXuzhNBPh6srLrg4aBMe\n+jmb320Oa5Zff2E8GbhzQuusbU7mPEyxjhkYW9hPBO/QCrsYKPl4Aju0sHRW\ncsIW4UDQ+0oz16N+SYmacWyUeyEE7yC6kDve/wF/q+Vc5X7oz0r8Z4sBE6tg\nJdfH2qc6YFhV8h58qILnJjlzjO6jOqzJOnk2uDbKZs4ANUV1VxSHLl6NEVrA\nWO8oyBZE2Gst+IkOIWQY+9blZB7m2oOobQSljqjl/gNDkrAqlXwdEbgzqM5J\nGfpETOUSBqLVLcnWLyI9h5UVzqQyYlIFH1XraR3jd4mpCPV5jRgYGb02VjDs\n7moSrWX6MgnHRQ3MERCe9L7VPIrbPQSYsETVHLXXMDYvEoBneqvL6wEbhRCc\nZI7i\r\n=SOIg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJSC1CKuLHk+bI5zXGSYn3disRzLFxZDZdMsZtRT1xcAiBG17PoDbrKl9/DQWgQpuRS8aO4wg1Mq/lsnuxuU4ir0g=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.d6dd84f7.0_1586395537907_0.90018840911541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-select","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.05f5e1583.0","@material/floating-label":"=6.0.0-canary.05f5e1583.0","@material/line-ripple":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-floating-label":"0.15.0-canary.9b03ee68.0","@material/mwc-icon":"0.15.0-canary.9b03ee68.0","@material/mwc-line-ripple":"0.15.0-canary.9b03ee68.0","@material/mwc-menu":"0.15.0-canary.9b03ee68.0","@material/mwc-notched-outline":"0.15.0-canary.9b03ee68.0","@material/select":"=6.0.0-canary.05f5e1583.0","@material/theme":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-WsV8AZQ9K7ZoOCkbTtnBFTi4/waOOQcCwIh44cGAerlB+xdiRq/qdIAxunyeqywEY4ud6G8uswxtRFz4pwsVUg==","shasum":"5ff63718c9237dccf554aa078f9f973547dbca0f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.9b03ee68.0.tgz","fileCount":46,"unpackedSize":897694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej3+ICRA9TVsSAnZWagAApEIP/jKnZMkM8tKQoi9pU5+5\nFpUMXW5Mruptaa4xIdzwc9L03Bkg0TXLH+LSwAQZ1rxMELvw+r+TklpmnKlY\n6mp/QofBrkSZ9TbwBKKfG282sVPDr8V8ERm4mMPJ9xk3kRgF/ha+4tBSeuMD\nWP/Ti+Cif5wptfiWVoOpbU7uBRuE/3bGVGFuoi+flpVuPBcwgFS85f1eqZbD\nKg4TwjpQumtJpL2C8vQ6ru7+niGvoDdVqn2P9QGSkwBVgHGTZA6qLR9LjFrt\nOddq/HMoaoFMo2kfB86WH2Ezn39eCi1lB/Xl/gh8ouoly4U1gCPl3gulMDf4\nofdpCaN2u/jaVYtOwornIC4yJx2092UmuJTzyO9/zIyV152pZvWAw/jFm0J6\nNrwNNsOgnQe0N0p71y4aR1yiLs5gKrzeub3eVlmmHtIJXB3Wp/1W3AiGBRL9\ngDpAvtbeAof0g2M7cVKGjFh3TpEIqSeQsdv6VF0/+50LEfv4om8eKUGZO5+5\nPTuu9TNZT1R0cGbyyioQFm1d9ff+ebWvfSHuP2V6ElWsQJKfYfewWeiqEImT\nDZw2KwfAZIfVvvuXJZ2/TpcSkaBkxi038hkSk5gnUtO5DZkTRiRSdBTi91eb\nNjm19BlQWG5pOd3ZpBsDaAA928nIDvXI5C9NoheJ6of5+oN9dpvEi0DRk2rl\nvy4O\r\n=sMFc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtUigiwUrZmLkE5lHkMh9SmZEbRht8/YsxASWIVvztIAiEAtPo9Nm784PlxdYsAwLig95T0Oqs+MKhaPd3wVaIYWDM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.9b03ee68.0_1586462600407_0.29793936313476665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-select","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.05f5e1583.0","@material/floating-label":"=6.0.0-canary.05f5e1583.0","@material/line-ripple":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-floating-label":"0.15.0-canary.bbc25b10.0","@material/mwc-icon":"0.15.0-canary.bbc25b10.0","@material/mwc-line-ripple":"0.15.0-canary.bbc25b10.0","@material/mwc-menu":"0.15.0-canary.bbc25b10.0","@material/mwc-notched-outline":"0.15.0-canary.bbc25b10.0","@material/select":"=6.0.0-canary.05f5e1583.0","@material/theme":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-/4bGaTSfQpA27ivtz97Kg3FJIvcb0RQY+ogwuw2lsxuFhmTFLhpQ6H3DrtAV7tq3Z+CDe4fAjLsab6U4eEn3pg==","shasum":"0d5b568e5f6b17a4a0a62a46b79d6c1bb53905c4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.bbc25b10.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPc3CRA9TVsSAnZWagAAdBYP/3V72hNKgWtXUZTqhQM3\nPkubc5EbgInz1S0ti0UL1IPvNYh5j/agtikZIc669RQ/jT2kpvAWk+tfFUQW\nB9qkWMCkJqV0iyjlo5u0KuOOoteagQIa4v68U/1rGuqNj9woLjxZ0Z1fVuQD\nMman1IbljLXCQcEw+D/yenzqSvIcT0oCk6OLB56b35nOpR+bV5xDD6Z+vSJJ\nr7Sq2ugW/CRdEfSHh/+r91c8JZPOhpFHN5iYi/VztKplZhoyGMUXsqyWU8HY\nrvYrZ0FMNsIoq25DyTc5NW+wmia0bNj5lT32XyrNIYrjAnDzbxYhpR9C8TGh\npbWDB3/q4QBwrjx0XDKzp1pvoLCba2u/tFbFXRJHivLFI9Nr/kL3MYYq/XN8\nnF71lEeCngm3s4PxaSiuXj/KEXWldOfwZzVAPXI88oezOgI1PAOHK+8tJD6F\nGLK203jSVjrMsynScOpa6o8HRm9gEs2DU0H8mBr9Tax3goJxB1xXdayuKBlU\n/BRlHF8Hgkwlynd4aY807fm44ad7unMBtZJnUh+cAsJrjzPoWnm/yDWe7T3d\nBfTsLmXFgAilFQQ8HZFz6VF0g58iFS2X4BOZrlnM9MsV/7FOdc8NF5aiPvJK\ncq7pnPC7yEMuLikyyvR0m0LjNjzgyo8v1+15fLpKkL+9JO6sT8RoV88fC6fA\nKaKv\r\n=Gb7t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3YcN0njEH7t74YP8Ojp+kHdYsQ8uIE5nlViTdaGMqCwIgEGlRcJaB36Kd9FQrC1zihzvN78zO6VvYrIQMHpA43+s="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.bbc25b10.0_1586558774524_0.4589261460123888"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-select","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.f172b0f90.0","@material/floating-label":"=6.0.0-canary.f172b0f90.0","@material/line-ripple":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-floating-label":"0.15.0-canary.339cbfd4.0","@material/mwc-icon":"0.15.0-canary.339cbfd4.0","@material/mwc-line-ripple":"0.15.0-canary.339cbfd4.0","@material/mwc-menu":"0.15.0-canary.339cbfd4.0","@material/mwc-notched-outline":"0.15.0-canary.339cbfd4.0","@material/select":"=6.0.0-canary.f172b0f90.0","@material/theme":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vRwz8O2H4VU2Cxfk+HbxyE4uxL30EPwX2ondI/a1s4xt3rZXlpGtRFV0496O1XcIPqUAatOhyADDHwiv+yShtw==","shasum":"a0d3cb86b060643ecbc999b65a1437493e17584f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.339cbfd4.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0a/CRA9TVsSAnZWagAANMAQAIXzUtUhko96Wcewi/Ar\nz6hWP2Sw5mDAgfA3wXh0TBJ5e/cAQ2Sj+Pv/1fK0s5vOx8UsgOWhJ/Gx5myo\njFRNzqkh3ij/OUrhxztNjrtZ+Q4AHCZWBmppmCbr5bmGblQAXL77b0yiJHSs\nnvWWSsa2JFHURYExXkB2nmbado52f2jMiULbdg9HL/CUFrAU63CqHOLoBY3f\naumwImwkLAmD4IvCXkUEwVyNNaVSqPy3oChrqaxcX1dttomqAW/44nuGp0lA\nVLH0S8Mr5FiX4fh1Ppl0UJ33EiLp9GSS3q7NaN15gh+DQcnLrN3NrgRh/ie2\nnWeMTiW4PMQHmAtz0+VLxyCrtB/1h9m+74lN9OYLU7921xTobuLdIpkfUVBB\n+LCQdQtp0UXadAuVEvlQLPAT/8pQadNi8a6hWvhy+iwGzncqDEkQ+4l9Caem\n+PgUPGr40l9X+vRlP/ixZ4BpM9b2EI1gvQgdwv/A5o5urKlXG/jJjmacV7uo\nXgYPCjH6cumu+AP7Yfm7vpDuwgZWfsJn+6vAR33zKHvbaeay30li8tPSf6Me\nSTs9YM6khOeIuil5DoMN+da/wWXoCTXNIhBzeeOQhLCTDQElxRK74zU5A9nm\nDNjOB2WX1u1qRUfjQK1An6XbTchw1nX3EjBe8hAuua0tdcMzqNwpbEjEUUg3\niEXl\r\n=80JG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJdK5RMckqVQ234JK+iyillIescBe5xHegpYN+SnCqqQIgT9hY0SC/Yrz6MAb0dY2oKgY25tIJssB7+LZ7MRgf/og="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.339cbfd4.0_1586972351091_0.4355076615895703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-select","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c02642273.0","@material/floating-label":"=6.0.0-canary.c02642273.0","@material/line-ripple":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-floating-label":"0.15.0-canary.b74ff19f.0","@material/mwc-icon":"0.15.0-canary.b74ff19f.0","@material/mwc-line-ripple":"0.15.0-canary.b74ff19f.0","@material/mwc-menu":"0.15.0-canary.b74ff19f.0","@material/mwc-notched-outline":"0.15.0-canary.b74ff19f.0","@material/select":"=6.0.0-canary.c02642273.0","@material/theme":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qybKWrkKCS1Ljmvz9AcW73DXSdupkN0BfFOXWa5QW9hqUrWkGf/MPvfUT39arIS1s5G/nQg+zUghBUlRDQji9w==","shasum":"a3bf0265fb4a2d1c5fa001c02a3708c7e6c02f38","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.b74ff19f.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jlCRA9TVsSAnZWagAAe08P/ikZQmIltTRXx3a2uZ9m\n8VA/zukzZISj4K4mlYwx90HkWTkK9uXjLPRLmokXKzaB7vMrUFoIT9ktMAL7\n8/nS0zfD7es5whuN9qvwkpHRWybXTT09c9kaA9JS47LMl2W5kGxJUuGNIsoV\nmpStS0o5aQRYnQp44NDz7aVGL+YSwB+SUrAlvMqJJj/GpihY6CnI4sI458/S\nhSiql0RoHyqwQApAkqQUl8eP/V0+fFrmU0alxlcvptplMmACa99GNWo2e5n0\nICXKrg43yTc0BNTlHfZes/c1JAv9ow98PBYdhVWQVB6ACwn4wJExCIpt5PJG\n103oE2pR1ZtF1jUmZTmsn3CJQfzV6XFrygmK60qztyXuxnQWgg5RQQKvSci/\nRv4UxW3+iIW/1wLGTffAtZcY5VkWSdUggF6IelbpZbAbTntCk69kXN1tOd+c\nmH+7cW/hkKfFOFgxDxdTLpVt0m7ZuPMFdRdLchHDmU9JBVZPElyTqyI7jg6G\nsFlpWqm0YPqzqYmJgsuZaTC/SXYTxYBRLiQUc4iMB8Pymq31mrBGdb6JwBEU\nCjwdlVimNMSyjV9bRW6+bybGPTv37DN672mhz9w1WIFt0NqVhICCghmhUlpD\nzH7020wNt+OIPyZ10GBQP3pCe+D9L8qeYdiUoi3YzCMVWC8N5uWZuxbz9d84\nSCAB\r\n=K9EX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmj0MvyrYpCU5bq/SLCFaI5s95uKS3GNYimei1oI1tCwIgd53lBssBRWqTXZ1nX5KuGpmvEMjKg9a652J2Nh1JMZA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.b74ff19f.0_1586981093112_0.6053734215360007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-select","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c02642273.0","@material/floating-label":"=6.0.0-canary.c02642273.0","@material/line-ripple":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-floating-label":"0.15.0-canary.aaa16853.0","@material/mwc-icon":"0.15.0-canary.aaa16853.0","@material/mwc-line-ripple":"0.15.0-canary.aaa16853.0","@material/mwc-menu":"0.15.0-canary.aaa16853.0","@material/mwc-notched-outline":"0.15.0-canary.aaa16853.0","@material/select":"=6.0.0-canary.c02642273.0","@material/theme":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kJTpZnqPjjVRfSrJ5oWhyLeJYhMj2mRR0uyemxJjIwYqF7z/WN4LtxrtR2ITLDFzxqvCbOpBy8aCSFk0zdvfFQ==","shasum":"e7ca37c9a39fe3f334d0c1ee1797232a8ca51d45","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.aaa16853.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42cCRA9TVsSAnZWagAABvkP/jN4L29jMZnZsDGCkx+0\nhTkNtefJyuJT57DVb7k56jwt05/Yy7Pxc0P/PpderP5doU656K727IouC2Cj\nx7q/ZhdZELbaen+ubQ7BG7hM+4h2IXN7zOEAYoiIZOMNgPNFqekCBYez1yB2\nLclTgcyzO4WtARhGH30MO0O/yCTDmYTRYJ+9yGU5bEvcurQe01toztYORl3h\nPsMfWPlyowonfMbH3HOW35MYjjzQsyGOixeUeCUa/zX97CUVZiCsW3KTCYXG\nPpkErNp46xZS3VgaysiZF99mMhR1VLp3yH7OvWGOC9VP/mKvULBTtgiMaEeQ\n0adbPFCPGj6lZ2XpSexf3WpiYctiRZIC5cAMwROy+W1OGTo+waqaRkTK5TKz\nAFu835o4+jtlgbZvuPxRNVbH7QzFsJTS3wm91Gw4/4ckdZDaOMOI/MD56/nt\n8KiInuMheKagDxDKIWFlGqCFe34LqV0AbseLA9RMu+8mXNehW3xmVgRGdYq6\nxu+OWvkmjBn+h5OGVBncBCA9UtAeSt2miSY71HGzzqatBLb2k+lZwgqIjtXV\nMJEa50mVAHmI6D4k6fbYQ26kQbe25xXb90weIDzSJZoz9KNJpQIixYlxDszl\nTR3Gh9l51ISGV9bhCbbQYtsCqTLUnzj3kP2Fgdi9c+CiuIN/SkYBiUbAgO+Z\ne/KL\r\n=qoSx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBEyXzCAA18SfoDwBw1MCfFj5sx95RA3V5cDOPncNZwhAiBRebw6if4KUIQdBa0+kB0V4ijkrMPBSnZzRsVi3KuTZg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.aaa16853.0_1586990491613_0.9128167079831413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-select","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/floating-label":"=6.0.0-canary.ce6cb7024.0","@material/line-ripple":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-floating-label":"0.15.0-canary.826b23e7.0","@material/mwc-icon":"0.15.0-canary.826b23e7.0","@material/mwc-line-ripple":"0.15.0-canary.826b23e7.0","@material/mwc-menu":"0.15.0-canary.826b23e7.0","@material/mwc-notched-outline":"0.15.0-canary.826b23e7.0","@material/select":"=6.0.0-canary.ce6cb7024.0","@material/theme":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-l4G8Ffg1pYxPObyEav6pMUqkUSc8ym9s0QiUQx5dLckvVd7NbJhUkUAcTFJpDusFBGDFlK6l/gUQcarcWtxP+A==","shasum":"f190fc96268fdb988cca09d6da4162273eb05dc5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.826b23e7.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqmCRA9TVsSAnZWagAAxVsP/jgCILevZuX/tp+Ebmfv\nuuOvj6HW13zNgl8q4P2IC43oCG8tpl+uBsrn99E0oDe8wUEfmhiXgC5ONQI0\nWZ3Haw8GjuTUQzxPmHjX2usB+7+w5Edk1XO5zs8ouPAA2ljKzpFmD5Ws4TbN\nc45R+acfV9l0aRrHqiF/9FMNpktCOIsASVxIMZb+H2OOB+BfNb+QdcoRGnWI\nkAAe7N1PnnPMSE7tAAWyis2YSoEzw0Ql5zSjHRsvfvTH7wgOSiOTEAi1gzRP\n7OHHSOULUww1IYcgU9LsejLdHv9PXtqZ5o1CbEQqYq56vU4R97TEQmgopggu\nbl5z7o6NUHbaQfb7MhlRrajJHC3kXhkSIwDiBgGWvYOEsyVHpkPEk0brHKKE\norfJevDVr1Z7/gz42dIOtL/0A8FRexYiEcyYwCYPe4+kObTvS/mw73pDiT5P\nW0WKuZ8c8xDecALGoFXQeyWkkAKJS8vNOszj1at1ORRBkk4lQtcjtbsx2dIs\nAgvnzXzV3y7MxCZisdDiPfOl31EghaRNC1IiG/aty/NYYUJSEiVQKboJBR5W\nBDXRfCjjpw6WAzvgwlhclmdu9QtI9+SbyJhRmFvSrPd5Am1XskM61OfrPFzx\nA+/uBa0P/Oe30YpsOYLoe3y27KBwTsMHZK5Iu/vVrqzEl7lC6kKHDnwPdKIk\n2RXq\r\n=7Q9g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCstqcLfkG+SSapbIP3XLnG05ywHpsWcqXCScQJhSpYlAIga//10imFUDVyJZsgKzoq3+HTWVtIzY7Vw7UfX4QLjZA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.826b23e7.0_1587063462023_0.2762002058166233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-select","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/floating-label":"=6.0.0-canary.ce6cb7024.0","@material/line-ripple":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/mwc-floating-label":"0.15.0-canary.e1ad2b2f.0","@material/mwc-icon":"0.15.0-canary.e1ad2b2f.0","@material/mwc-line-ripple":"0.15.0-canary.e1ad2b2f.0","@material/mwc-menu":"0.15.0-canary.e1ad2b2f.0","@material/mwc-notched-outline":"0.15.0-canary.e1ad2b2f.0","@material/select":"=6.0.0-canary.ce6cb7024.0","@material/theme":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HjqlNY2YjiywuOSpOwICljjVu0vnQWFDE+eIoi4nJ4RvxyD5QX8kYycm/gHuLKnY5PUtKYtvgbxY8ycGVb2Hqw==","shasum":"dd9e20aba920e8b0c9dfcd2583af0af294117501","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVnCRA9TVsSAnZWagAAtyUP/joSFAMMJ21xVsCeurVi\nxZl/szAx04PGEjD+fZbNS8Y9tTWsfUG5QnpdUNztyXyiwLb60FBD3BUiR45k\nu3niz+1Uy/5CPmY29FwymhFgNaAuBsXdDMTH0FHbbiKXu3mZf9A+6GU+CeV3\nOELVc3zHlFZRcaghSWjZWd934vDOXKEXABajNxlm58H4YCF3v+W0UGgwfNBl\nfcxNhml+Oz4ZhdPsm3m9yDW1BSdDirlY0sZEK4cy6rHBxHNaHmL5KIbSiy0l\nPRy2QN5twvF+C0cmHiAXpP+Ky2qsOF5KWxn3xkuMLHud1GOHxbp1KzmNFfP9\nmTa1uljGVxhkADCvN4xbVML3o/i/VStJuYpCmFCoxwCeCXX4LECnlEFfmsaz\nySWiQGYIZXU7xCU74wmhJ025PZKXrtwRSQ9t1pDQ6SdifUPfy9vE7SedhWwK\n9QHHfjHcexR2KLPfTJOQF8RNRxLhDj2g+Ik1lrOlIuEgdZt/PBmDoUiTwPEs\ncw02ofskk0VNqEK6C1hhkkbU5SNx9Y3uw9qcAMddYIzfLCO52dIIuopNWqb/\nNEhfPGS18zhhuvnGdt2eTrC5o4J+qrdS6XxUjMfA9VyH72SQNu75t9Dfx9HP\nVxh8g4CfFPzwcS8ljlFVsjuFxFKc+mjQRf87ImHmbTrxfbPfIKdoRpF4q0Vy\nLUJ7\r\n=fvH2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPonFoxpQNnnR4tS8E2XzzNmJ/FM8et++vVtVrLcz/HgIgZ6xZyZIbq3AXkcJtECE5UzXv8WmbYlu2t5V0P97HVOk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.e1ad2b2f.0_1587164519268_0.5602864699479755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-select","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/floating-label":"=6.0.0-canary.ce6cb7024.0","@material/line-ripple":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","@material/mwc-floating-label":"0.15.0-canary.bade5580.0","@material/mwc-icon":"0.15.0-canary.bade5580.0","@material/mwc-line-ripple":"0.15.0-canary.bade5580.0","@material/mwc-menu":"0.15.0-canary.bade5580.0","@material/mwc-notched-outline":"0.15.0-canary.bade5580.0","@material/select":"=6.0.0-canary.ce6cb7024.0","@material/theme":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tbafSMnBR7sFO+NcQsQoa/qm9BZha976GVvQ36dgXKzxPGNwZzaxi1uDZBbKNsylTqA1JngdrimhBGhn3lI+Nw==","shasum":"2f8a06a32d4429f3d8aa7030f7069c0596c6eb56","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.bade5580.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjmQCRA9TVsSAnZWagAADMgQAIWQUlA5KUxXvfxu4ZD9\n9KjcpaH/AzG6heME/WTjDeax4Y3sJLm1+lE9Tlmyss8j8jiGLTO00d4rYVI2\nBowcbqkm7HEJkySss4PELseZBkEen9yUC6fcQFJ7GueTMw36YjllYopu4qFC\nmW0BtWXDJJ5VRCMX1R43HyLJbQTwjSvnqIIBQmzFmOxii5EX2biJdPZ9vQ/+\n1UXhnTjx5Sp4prPqgI+Q+f4fLeJQ0HjlrBobCNBQJfbBow629dkxzm8i+ew5\ntaqajXj9NJXwmeN9PogAVuTdDO8UXu/UYx2wSAnXvfBWngSj2ixTv+hrznaV\n3WlZG7MJp5d9dPJuuF+gRdlohKmk4oQ2/M94uPUaaD3onjv1TjSNqt2OXnAW\nB9dBZWmRKs3ys/lAIi/pUCd8NwbKYZtvMO5YSw+sFC0tc7FJGR1in2hgcNML\ntMTHSCJRYMxDR5koOvPKYiqyEWvmpW8ZhVrxIUsjHjeKdhD6rt9TZcYMGAWA\nvAJgI378KoRJgHkLnrb1ypWX4JtIXw/lRs059/5id+AQHMKviKZXMSu0vYI7\nbEqRe8UCbS2y4oXsaxX1w7VXxijUh4iI0EpxQ6H7xbu8THFWJE4wDAyFLX0a\nVGHpS+ZS9/WD6Bw27Th84vil1eOGxlmC56ZZqCEPO8RwTcMh1R+O8BAsVx29\neD+x\r\n=70Fo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBW+L70Z02d2dyyM1ndNGprB3tmc++3Cxc2b5/r4/bO3AiEAp0mxFWoSjuvPe+O3i1rly3ZVrtDCCLg+VlGLCCkqHu0="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.bade5580.0_1587165583669_0.4610430154766676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-select","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/floating-label":"=6.0.0-canary.ce6cb7024.0","@material/line-ripple":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","@material/mwc-floating-label":"0.15.0-canary.dae38247.0","@material/mwc-icon":"0.15.0-canary.dae38247.0","@material/mwc-line-ripple":"0.15.0-canary.dae38247.0","@material/mwc-menu":"0.15.0-canary.dae38247.0","@material/mwc-notched-outline":"0.15.0-canary.dae38247.0","@material/select":"=6.0.0-canary.ce6cb7024.0","@material/theme":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-b6c0dC7PvqsTyS1peCa/whfegw6M0cHXFl0sWTornw4qpAhFiJYMzA9+eMn5h+w/yGGKsCpLXjBN2PGtRar9dQ==","shasum":"908b2c12ee72b6d686d6157849a7cf7535d1860e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.dae38247.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbmCRA9TVsSAnZWagAAL4sP/2PalWVe8mNAweH8IBWN\n5AWaSzCexprzddIIrY/tuXxyvNhZCWlcqqA8920gAzros9nWk1RH9PLN7ymZ\nvGq76HSAXFCJLZY7/5YVxhk+Xf4O32uuc2bLBqYX7mIgAzXq/D5fIvpJcaO8\noLmPBpfeICIEdNHNT0NNfnAiC/8MuQimKt27MwRS1vJxlX9yR9otag3DMTTZ\nD4uH9LnnDMXEj6aVexgxSS6TSkaoJcAFCnrFS0bpGDgPn0XeZp8RjZUAaNaV\nvL/qEdgUiz1vzSDX4ZV7I+yKGDVXwq1PuDnLfQGvp+yqvXEHYVvCW3JnsZP5\nx9FMP/4CoH2UE9bui9U5n1KWjipw5QSYC5wsGs0CIm7LJMVutzR5JoMjOCGW\npwoHrYEAzG9PTcIg/sYpbedjOH5j0yZZnzZymRfiQ1+vz/4OD+FcfVF36+NM\nyAiufbdm+oxgC1nX1zIyrzMBoRhMrAxmc9iBT4eTJwtKN8lybcs9Lv6SulrS\noV1lJv04StjQpnzfSUBZigqErxHw/r/tRIxcz3e8mpO/+tZ6fr2xSOoL8wvI\nagooaSOZweRSKoDliGxNuOndh4Ut819NQGewN7KpQTWnAD4NpoJmmzTM3EQL\n0QMZ6RsopArTN1VvAPgz3enwmcbBRGf4QU0TM3/1RUaWFv638XHabRWfrWUR\n04zl\r\n=GlH3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUTDxxhF5Mtr07eZgigf7B3T+rZBAXlYrJ0Bf+lFpvygIhANya0G6ovI8a2kTRHkiTlo1wMEj/QmNm6n2ZahmyKA/D"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.dae38247.0_1587168998127_0.878289500806477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-select","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/floating-label":"=6.0.0-canary.c4b4bba96.0","@material/line-ripple":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/mwc-floating-label":"0.15.0-canary.a04c0b82.0","@material/mwc-icon":"0.15.0-canary.a04c0b82.0","@material/mwc-line-ripple":"0.15.0-canary.a04c0b82.0","@material/mwc-menu":"0.15.0-canary.a04c0b82.0","@material/mwc-notched-outline":"0.15.0-canary.a04c0b82.0","@material/select":"=6.0.0-canary.c4b4bba96.0","@material/theme":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tzxIM48DsvlGoGsp/0bqHjgGPtyzwMoa+KTO0osZPGC8p18zS9zyXbzbHSejpvmwCqquRvEMiiP0ogNP4MjNKw==","shasum":"e1b09723eb73b13b9a73782927a09db6d08f464a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.a04c0b82.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksnCRA9TVsSAnZWagAA2IUP/Rj6Y6Y+g/pbGRkYGBso\nn0f3deuzmsx6EiRKjF0kwTsKy+l7uAktAgImPZDY0kvUlaz5L7asoFOTPFEO\nsDP3nMo2eWXSjKvzQaUUJafWpbKVSYZM9jzToRD36h6jnRNG8HnIJJ+UOne0\nYYsGhGGXCCXrpBdcQ2QSWEoXLbZboAWOtlhu2bSr4IRvU7eHQhabZtpNjpzU\n6uMbQ6HhdK3EB0P8/CHC3Qbu8ZQbW66QGXZE8HA2NDOkegeUhZdo948uDWAW\nbuhcuhzsCDmSxfJgXoWe/S95cq/XEDZMKzg6sMz1PThuSLtFco/MVh7jHZw0\n2TKJRPRyFqbBbJhyJYbfTf2tcwV5zNm9xLolHLiaGZq2GmM7cZD7aHoQgIBe\n3dGtuRGnqh5vmHsI7h2dQ+ywh+D7AS0VKyNQ3YS+qBrFjWc74N3S26pGgjm7\n4zmVHVBCUtHR1OjeDYL1XRzNkfLNaL9oRuZbJ1spl3Kwi4tNsiOcyLbNsdPF\nJM0hxc3XVidvKlEBAzzu2qNcOXB6ZGfC6dEKnQTcEC+RL00smrHGDJY84suA\nCUYm+hZFVbYxE96UtpFeAZg2w6+FHiwHSiw7iLpgbXG3DLqtjihRvltcbg8P\nOs8Whrt/KHbWjw5L5/6BLfenPkbR6ufRBlon1BBIt7US2IufPeKxnUyuTRRu\n9v6P\r\n=ta3g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhf6srDRVYNR51BZhigL5xpm12lTb1Tv6L/dhyO39P9AiEA22c50Yhm0g6B39zSnMxayNGzeSjYpt4lA3THDSZVnX4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.a04c0b82.0_1587170087065_0.8562154027642142"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-select","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/floating-label":"=6.0.0-canary.c4b4bba96.0","@material/line-ripple":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","@material/mwc-floating-label":"0.15.0-canary.715decfe.0","@material/mwc-icon":"0.15.0-canary.715decfe.0","@material/mwc-line-ripple":"0.15.0-canary.715decfe.0","@material/mwc-menu":"0.15.0-canary.715decfe.0","@material/mwc-notched-outline":"0.15.0-canary.715decfe.0","@material/select":"=6.0.0-canary.c4b4bba96.0","@material/theme":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5P9N8Y/lffzbAQBAm+JnWpWtszE1ug3uHcVsitlTGNiKCsxJB76KcW2D+DvHftmjt0Vm4brvX2f84JF3bmMRrg==","shasum":"45e01d6b520cf26736e3e78dbfde4fe1fe60b6d7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.715decfe.0.tgz","fileCount":46,"unpackedSize":904140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeneuNCRA9TVsSAnZWagAAEnMQAJbvXr2InZqF8JPrFLfC\neCEXlOOmuVE2tC9fVbkTokRDjpCgM+AYVjJ/PWyFiJ4xdQEPR5zJqnSlmxVi\n1MoC1RBZKUU9J7X5uHRVCaj2mFqqKiy1ixD3W/3JVajld/JIv0jm14dY82dv\nlub+T9B72v16KykoJphnpe21aBUW8HQiYkcghPZ1guDC14Q9QVQRHi6288Y8\nTER523ICkhbDHf2Nh8Ckr6RUh0KFYWKIhkCG7a+QZsZCcMFR3kC/4ogOe4ez\nsm1IerCpsYt9oc3mYj32Jxs5CjTRbmtX1t3lXzZ0yRsma7QCt9tGpSMnYZDG\nX3dEqiiIxLNLRJYbvulCsCtXwWUCQYd4ZjRdkkCQuj3ji41nbU4W1yfBqvPl\nkUJNTGYYfSPLurMjOrVm5AO4PGs32vssGKKNj76s8Hc0xuAkYR7PFu8h1Yu4\nuqYTOTDTvAVws/L6f8Aj3USU9FP8pr878UKjnVi45M1UGXPG1sRtd4xiEaEu\nCoXFn4nXEWd7h2EXNZtyD/1P89MIwDpudJQLQhD6JL5K7v0XygTKP2odMJ11\nXoigkMPQMSlkQbIZoFps13n+uTCNIVmuWzU6oNzFwhr21yEgnGYWyK9UjxCx\ne+7jqT8N+Re5x4a4GOZ+ZF55So1DZODs9r5m1I/HrUjWuB4Qv5hi8Bz1HdrD\naLWk\r\n=Myz0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuTryxEH+Nn3ONxJwC1cOquM7N6U5cUoT/Zt7wU7JehAiEAlxMKF6UdbcdptohF7uJWi3676lFHlt19Lt8E3LfxpxU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.715decfe.0_1587407756823_0.7350433626261708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-select","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/floating-label":"=6.0.0-canary.c4b4bba96.0","@material/line-ripple":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/mwc-floating-label":"0.15.0-canary.c862cd04.0","@material/mwc-icon":"0.15.0-canary.c862cd04.0","@material/mwc-line-ripple":"0.15.0-canary.c862cd04.0","@material/mwc-menu":"0.15.0-canary.c862cd04.0","@material/mwc-notched-outline":"0.15.0-canary.c862cd04.0","@material/select":"=6.0.0-canary.c4b4bba96.0","@material/theme":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kwtZKATqiKbsrbZ5ForK6zSWDXrfi9P5w/OOPDv/a4CKnwgx/s/C68oTcRC9lLeJ8cfGmA7TXvK7WA122CC7WA==","shasum":"56bdf365db5b79835d2ffa0ff199b2a6c1702560","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.c862cd04.0.tgz","fileCount":46,"unpackedSize":875570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVvCRA9TVsSAnZWagAAMNYQAJdsOMaw113usENb/4Y+\nUmKLXUfU7UO4e7bZBFwQbAhLsF3NNZyGQL+ue9JUAfxGX11Riahl7rXd2iTB\nV33h3LCD6xhpmM2AaZjZ8zerg1EpjHv2PoSMAthjKETOp/HRaAYVqRIsUgG6\nvM0YcxVFO35Bbt7M2vw4nRnMvUBSmYf6Mcq8CiCIdx7Eakm+W+4k+HA0nNM9\nP7y990ZIAimNtr4e/BaJVYMUnKtj9BJw7x5s8yhDqMJv0JE0AE4IVWINZFpg\nZKROaeGySM9HkvHrEXOfpErDszi2C5KEeQyv6/PH2NLWnLm87r9SYCrydoOw\n5LgOqML86+FQIErA9xIQjhN7vMqqlpsWzR0mt+NMusj6xJmMv9T0BxXQxkkY\nJiDNJ0QXarQyBlA7ac+on8dBAHTQmMBOmcfaRq2a8u3Nj/Nlv+Qjk8uRhQ+P\nYkas5O+wYhAt2vhVoL9WbALWb7BE+AeQLpXfysfjXjVuZqlDE8Qb6PsqnHbV\nQeuyd6f+74QOScvGrS7XaWPnJDpoHXtZYGp/UONZGvPolz4wCCSwy8AY9SWK\njdKuKPq5I9EMLz6HBMmORorK7zE0pLxZVUVi7KC45bJT4H8s5J2SSxTdAmsg\na5TR2/9Y+qw7sV6uPDXCl+a1fiS3bTDzxAaN8OjF6P3FVf4itunRacGiwwDm\nSDab\r\n=Bofq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDIFY0fn6T9HkOyy+uE71upH++uTqlSKFqw7P5q5jLeZAiAvxO9YoE1kX4svuH8nh14VCfIUvwywraUSLVLtU8sfZg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.c862cd04.0_1587418479127_0.29465548737846525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-select","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/floating-label":"=6.0.0-canary.c4b4bba96.0","@material/line-ripple":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/mwc-floating-label":"0.15.0-canary.e9b01b35.0","@material/mwc-icon":"0.15.0-canary.e9b01b35.0","@material/mwc-line-ripple":"0.15.0-canary.e9b01b35.0","@material/mwc-menu":"0.15.0-canary.e9b01b35.0","@material/mwc-notched-outline":"0.15.0-canary.e9b01b35.0","@material/select":"=6.0.0-canary.c4b4bba96.0","@material/theme":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y74zGq3OwbtyhghVoe53S8ZBmERaYPN63sVjNInLszwpPPuHvxApBL6edzUUYVOJ2P1lwvtNhZcdxkPJlmz/jQ==","shasum":"42f780ab10d5c0387f0533fbf249a459a8d5e4fb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.e9b01b35.0.tgz","fileCount":46,"unpackedSize":875570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBzCRA9TVsSAnZWagAAD2wP/ivbbfG9Uuj3KSX0eHV6\nuLu+H4FU/Ry5kYurTLFYw3+ychQNofxPGgsEMmXbgM2Hpz8UT4gt+bSc+tuT\nJeXzPvU0XDefdo/EA4qCwK2ljblS7Exitu8NWLO+qwTcsy0i6rGCtoI4W9pB\nF+GdlSIfTwODpZvicCt6SOZ0c7kbL5DXTex8AFlAu7jnWFpWh8jpwWQsViCc\nbQy4Hg5PXUROw8K8eOoYYr0LNVon5baRK2+8fy1t+ffZofglta+b/kVdeZYZ\nqRSzkIlQPxr/FHuhtJ5n/KVZ/hVPA+sckpuJ/Z8l8Ywxt0X6wHEYJpvXANHY\n0l4VXMASPvIb9Opu3WjdL4LFS10P1CzISlMr8hsLH6ceUDkNiYUaVAORKEK8\nMrAnj4iOc2ICj1XgTTTRkaqDWM0ERjEY9dw/9UWjbICr6Ekx7ZejTgNF0W57\np4cu5Ascg0escXYrckIMbS7OJoxpZPlqi8rT9jgyYTFDpUlyXWd7coGLlECV\nHE0K74flNRKS/YvTR+1JyDc9Evtjs7GxuiXMzna9qC+d7So3KGFmIT3TIaSR\nOdZTWKpjhCQpVIWwf3v8zsFPrhDRRmMxzyClZcc9lUQppwDmUgiz3IKinPie\nnQIBKGAB94rKCKFPS0X+F0deE55e7zHF90/e9oTrGiAELK8oeZKVdQqAOi+n\nXRGb\r\n=Kq0p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETPWs/l6qvkZQdTRqZwRzGjjQJ/cRHT2N24+0yABSnFAiEAhouVtoOmAqdPFwdjD3q6M+kK3nAOgxlBYxEIoX1/Tns="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.e9b01b35.0_1587425394712_0.5175709575326877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-select","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.7b4482402.0","@material/floating-label":"=6.0.0-canary.7b4482402.0","@material/line-ripple":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/mwc-floating-label":"0.15.0-canary.ee7e8989.0","@material/mwc-icon":"0.15.0-canary.ee7e8989.0","@material/mwc-line-ripple":"0.15.0-canary.ee7e8989.0","@material/mwc-menu":"0.15.0-canary.ee7e8989.0","@material/mwc-notched-outline":"0.15.0-canary.ee7e8989.0","@material/select":"=6.0.0-canary.7b4482402.0","@material/theme":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dPrix8YRIQVcrfLPv97QND/p4TA8x97SYh/SC9Eos0ltV9dV0D9JPD5SA8xWgNSUz5t/b+ej3cqN0ssE504QaQ==","shasum":"2b0f8719be0ef924e69bc035b23866a134fa17e0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.ee7e8989.0.tgz","fileCount":46,"unpackedSize":875570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOkCRA9TVsSAnZWagAAOYIP/R9LaaOa/9eSrmjMT2nn\nEIS7Jw3tVZnMgxVtRhfDDeuUrqBD22oDC2O+7nCW2N8T96p+h4Fj2X5vn6Tm\nf2cCdNBDguac+Bu2uN9u2oLU0ZXU5Aclu8Z03HLh/2yJYFJkHkmJVvC4ZWKu\nw/T09bQFd4oy4o3hlP1eaqIH8bnEeJJYIhPIefk7hcchdXaNmGpaMHMH3Buw\nuCWdRwaiToro8eFXn3liPmF5zlmczE6DJAGw/khJNdAeZC69y3ZCiKO2RZpx\nmdb0bkykZrPV3ki65WkTYgLwFT9yU6cNeQV9ZX9OCywIIN1EidNDHAL+U3x+\nNSmSue375zp38RKbu5m4JW2bRy40E7f9JyhIM5sbSRuiXBa2dLz+kSzYehQE\n1EqtDVMr2XZ2PORwfzBIvzoHPWOWNyDUcH4ZxIUv8ChdIXkyhZ5LWGyaA+dH\ne8eRDeu44A7F/tuQm5A5+jUXqUIYIau86WpGtcOqWi9u5lEli2X230fmiO91\nh/KXqKROxIpiJJL6w4yQ7Zz739UwvEYlDHInohHQ7LYAWjP6wIokCvLwp1YL\nsrYz3fs/VQ0lp3ye/9JNBTbfLtUVMbxMd6wgsJbbdiOFqVtQfrm8S885sd6l\nUIdnhmb4LBq1vwBfblilK+BA9ZoI3QIxPkMBAb8mJO2uP9b5qb+FFPq6e4P4\nTT8H\r\n=pVoG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqhnhkQAPV4LKbY+gvZH0DRNISFydCk0sCRt05q6w5GAIhAIxocNor69O6eewCU06oNmM+DTotgE0jWEWxwjFdkYNU"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.ee7e8989.0_1587430307865_0.23510253542151704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-select","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.deda86d8c.0","@material/floating-label":"=6.0.0-canary.deda86d8c.0","@material/line-ripple":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/mwc-floating-label":"0.15.0-canary.9bf47ffa.0","@material/mwc-icon":"0.15.0-canary.9bf47ffa.0","@material/mwc-line-ripple":"0.15.0-canary.9bf47ffa.0","@material/mwc-menu":"0.15.0-canary.9bf47ffa.0","@material/mwc-notched-outline":"0.15.0-canary.9bf47ffa.0","@material/select":"=6.0.0-canary.deda86d8c.0","@material/theme":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gh29vSOESxitxAtWE9RTlPfqio1DbBP9DEejW7qasfTH8SonU+ef1XikyNJSlpaVPX3QnLy4PM3wg88twPTI/w==","shasum":"d476493024e55e75ba0d3a72dda7d9cdea32a830","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.9bf47ffa.0.tgz","fileCount":46,"unpackedSize":875570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz29CRA9TVsSAnZWagAAjDYP/jA7l5VRqE1EYcxeJdJE\nD3I7WIX2757HbHozwDdU//CoMmnfhSf23xY2Xo7allCRmY57/TiT8nqav9lS\nxmwXJJYaFpg7Uoyc7WCgalja3MyOhLKEmhGBQT7qh5cMgPHBkDcgpW8naOBe\nt4H8SGJN2K7mMWidZXHZUUqC7TE2m1QwSmCZYm5rLQ6dO4UqMJalVzaz0b6U\nBABwsbTtfT7cSh2a7Yg564ieg6FJ+i6nkLLjCqzO/PNGvRKCwXoD3ElEr7pr\nQ0PeE/zJQPKfaX3l55fnSSNZKLS2+X9vZr9BAeBePqnTUw7ZHJkuGdJx82tf\n64xezcm260zGkr1PsBcY0RRhMdXrl1wHE8V3/bN/OU3lZSi1+0+YIwBV3EZS\nFDnE2ADMCY45VHZQxWmQoOYTPIEqIOCrH3QopLCPC6w9weA/iApJ+MLYekiD\nBrn5q7ckI9BmTiv+sCqcze623gZFpH0+Am+g3WordxhG79bScZtgxL8Z/3BE\ngTdZKHvJ4tqV6fEBhcveIrLse+0bxmbqNnNDTYKFzARl10jixxG5m9R2s080\nmOlRKnYmgp6xsxLSPcN4gt6n8dGduUfZSmEWYRMv47vo8yvR32GelZyyzyTt\nhV0vlJgEOVm2fhAhkl+J830/jCrEq/y4wITc3qzN3fINLQi+Q976eNavtxX/\n45cZ\r\n=403f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG16FwAMM4tbGO4vhnT/bORBTJgdEfxB5zeo6bzeDXTaAiBe5Sft91hwjSqMcPfE2rB1aC/umxkdZykrllkjDZTemQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.9bf47ffa.0_1587494333252_0.23186838761899642"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-select","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c141801d5.0","@material/floating-label":"=6.0.0-canary.c141801d5.0","@material/line-ripple":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/mwc-floating-label":"0.15.0-canary.078dbd98.0","@material/mwc-icon":"0.15.0-canary.078dbd98.0","@material/mwc-line-ripple":"0.15.0-canary.078dbd98.0","@material/mwc-menu":"0.15.0-canary.078dbd98.0","@material/mwc-notched-outline":"0.15.0-canary.078dbd98.0","@material/select":"=6.0.0-canary.c141801d5.0","@material/theme":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LTgDzTWFnmYswgZIieb1MM0BC6aWUgtG1t7KvPH5ZEBhQE4f4Jp9i5+LubEtZf/a4xW8M51QLcAs7JTjxd/Rzg==","shasum":"a27f9cac4a6ad7d45c4fa43e61a49fdac3f00442","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.078dbd98.0.tgz","fileCount":46,"unpackedSize":875570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2HSCRA9TVsSAnZWagAAtH4P/1FaadGK4U0FXc/FX9SR\nNYjO6ZRs1CUelUVRWMkyHWl0ByL1TxRhlzKJHegPtgRL/gPdw6ihaFKMR/8V\n2l1wJOkZsQ3HxNTi3/HRvHX6Q7eXOg+gAj1PtAwwlJDu4J5+T/rRpJUFyEso\nfQF2zTI0BEavj5KT8fDoOeMp7s8CVVwpfxnXTYOEd7aa/1XTGdUI4+mb1GLV\n0A7IiH9WEskP1BUsQslbPkMQt3DKCx9dw+rTXCGEcdTqHcy0/mZ4AztNj25e\n7t9j07XM4+5M747rWw+MW3P4MQO0JzkCh2pEL+pW8YkC2wje0mhyu7WRHxxq\nEccHRlcSkGjcX99Qgz2Vq1RZch9tru5JwXw1KJFKZFSX7nBmXfdjRRsUKR9O\n15UrxbmBl1Ed6Lr8O828kMobMF0EfL4XJ9jch6EaVJhukQsmZeOuc0juuMO7\nS3lFS7hCLAsoQ1u/LN6aFCZrAIRbrEqaq6Wh4ua86xlN/s7qEEuM9/eVd1h6\nl2sz2NMIMd1V70hwCIOJPbpkVfHNDXVMTboKcDgXSzXEwdaXcoiYu0ffpL34\nqW8vXPmLKqQ/2sRYFg0MdzbaX6T21kHyYTlp0XZFgJVx7FsySHE94ecOdE+c\n9MuClpZO4DZ8Rc3HxjhmSyZC5zvREM+bc6PuZzHbs55G8p32JM61lIhd4phC\nnGPq\r\n=H8oR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD36UJcS371jWDftrflg04YmcUwmwRCCpd9WaWw43VudQIhAOmfu2SmEj/afy8afk4OdpXNjDMu7ruy54qcOp6+qkQZ"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.078dbd98.0_1587503570128_0.05404936385930004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-select","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c141801d5.0","@material/floating-label":"=6.0.0-canary.c141801d5.0","@material/line-ripple":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","@material/mwc-floating-label":"0.15.0-canary.953015d6.0","@material/mwc-icon":"0.15.0-canary.953015d6.0","@material/mwc-line-ripple":"0.15.0-canary.953015d6.0","@material/mwc-menu":"0.15.0-canary.953015d6.0","@material/mwc-notched-outline":"0.15.0-canary.953015d6.0","@material/select":"=6.0.0-canary.c141801d5.0","@material/theme":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7dw3rxSZ7SF0C+HMgTGJz4ccXwwf3rb2Q3X0AHZqBeuC/HUC9XsJMPDVTjnERpvfjWha9xGrmlZ4baEOc0/cTg==","shasum":"4ff510dc037f1876c4e9632d7ff890925e8fce87","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.953015d6.0.tgz","fileCount":46,"unpackedSize":875570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2dOCRA9TVsSAnZWagAAvTUP/Ra9iNVs94OsN1rvd4Ac\nJ6S3xyPw+Qbq53kyg6gUwE+C4HkEk5gkVbKspPKcp+EVBIyKzy5hP1sRPAjE\n/0KX/SzkZQhXooxUWUaD09h0s95Nq9D5CMcB+oxwrkQWWxylrHmC1C4nOuum\ntgWTatYAcLcUoX+WwrI6ubZncQxX7owPh410qEMJ7ju7S5Wum0w65jTxw6Xy\nK3eaGO/ZRNAr2RqjTiRY4bpta0yO4MKSL7t+boS3tIlzyV1CoSienPvIlQ4Z\n996O5NybVye9OOwjd8eITrhWiY6Eg9UwojCZzD/j9oGGrXJ7EQboriN1RzTw\ncCYJyUcS6Nm9CvByU57JW5/PL4Z5AOfNO/Fhb9+AQ8hKtzAGvIvoFAQGwVq/\n2U6KdeJEwdQd+4IC8Scy31xHx2yadwnrz2elv2mRahPS927z/uZpALuV2i93\nKuxPTGswF0nJunSgTbybhAPCsl/H3aH8wRkjykGsqG0+KOqsLuCa+2YxQ/Aj\nx6Q53EUM3YOd3pL9uynaSTEFJvDtYQOcSgKfCAe+1UCAdXtu8n44YI7N9UGg\nVxKSH5A3Yi4Zr5nooFf3256KrG4yqhOSjowutb8BBRjEGNR4ly5t2BE25pM5\n/K5S5zPNIYMdvdrt8RC3/zKMAjEpWG+trbdVegqO08Nz0z9nhDa00f2raXJw\nEz6b\r\n=eHv0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIIFtyr83GhTJGCFptEm/VOVPTor7f70+E9g6AD+AoqgIhAK3TW/YbE8WhrCX592hp5FDt1aFoRLfygF1wTPxdafTK"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.953015d6.0_1587504974459_0.8846654346594227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-select","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c141801d5.0","@material/floating-label":"=6.0.0-canary.c141801d5.0","@material/line-ripple":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/mwc-floating-label":"0.15.0-canary.c360ec63.0","@material/mwc-icon":"0.15.0-canary.c360ec63.0","@material/mwc-line-ripple":"0.15.0-canary.c360ec63.0","@material/mwc-menu":"0.15.0-canary.c360ec63.0","@material/mwc-notched-outline":"0.15.0-canary.c360ec63.0","@material/select":"=6.0.0-canary.c141801d5.0","@material/theme":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-S1unAT6t7O5aW4KElGSI23fAc6I5FZK8kqkY1+chEPCUFJ/0LwL++QgyVfTzrMtl7efsfsLBbhlI3PW10C4wHA==","shasum":"33798bbd1b4fcaea1bfe3745d6ad4b696d78aac7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.c360ec63.0.tgz","fileCount":46,"unpackedSize":875570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2zBCRA9TVsSAnZWagAAEVYP/2gS65Zqd8KhmsI0oVYd\n6QXmQRe81hcCapGOxTudVwn+ZBSfvPvHN7rJeMhRy4usBI3StUjP+yYJyvV6\ngkaARURHWBtcWiswuwXesDh3j+hQo0pJixImZwgeYw2tv7mXlbcnzffoDMR9\nYZkInId7QjMB3m8MJ7+XNWOVCdwcvCKf651iq+l33YjD+QaT2MBNJgt/accQ\nArLAXvS0LTmYHQkn3GyPVqd+XNf0Lc2i8NOEyx2ud2Rj/TMPwFdV1+eDJzCp\nfnmxhzZiwWGTExFGdd9zsnYaHW+3PEsp7fGMTTtWMVMrRIMg1VzG/RCE43qe\n6i0vl+3ug+16D69tKrcZK0q+uDnWyoDhr9E6I7xHYbEdsg4AooXCsGWJ6Bm6\nW+4sAPyRMoiw1/siSvmkLLNGEbgoGgvTlqLz8vrPUPvrTOk7Obu7d/MkKuoB\npI1nbMxXTE8n62/mt0xEewHGmqCyhAqWZq6NsbvkAyR8WAxtW1SPFiMD+MJL\nnJPuODRpKDyIfZ3qfwBcfSfrKgH673h3NxgrpMA2rTSsU1DFCDvUcjGibP/J\niBE3Tp9DQKKE893OquRm+Ud4DFMll4VF//GHXqpIPTLkp0RUPbMAoZsrMGx2\n7IPbQTX6UaDeVtJLaYDw62xL3FaaA5isamOy+pPgjq/3YnIundkGcfc6NMc0\naybq\r\n=jNlt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMKe56RgFbCVWBQ8scYVkuVaisn/MMr4AGLK/9LdFvcAiBUOK8qmszpt66siKG85J67S4B59Fim0L/Dtt0U6ErgRw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.c360ec63.0_1587506369287_0.9793563486835288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-select","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c141801d5.0","@material/floating-label":"=6.0.0-canary.c141801d5.0","@material/line-ripple":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/mwc-floating-label":"0.15.0-canary.d71b65aa.0","@material/mwc-icon":"0.15.0-canary.d71b65aa.0","@material/mwc-line-ripple":"0.15.0-canary.d71b65aa.0","@material/mwc-menu":"0.15.0-canary.d71b65aa.0","@material/mwc-notched-outline":"0.15.0-canary.d71b65aa.0","@material/select":"=6.0.0-canary.c141801d5.0","@material/theme":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SPyUZPCB0a4tAk03AdNZJ3rNaAipClsqFT0ixZC5mziI6Be4lwrfhEK/F9ZlDaW1QNJysDqPwxPOh25F0I0ZzQ==","shasum":"a451a9228d34d16834e6a41a58bd62239cb0969c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.d71b65aa.0.tgz","fileCount":46,"unpackedSize":875570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3XUCRA9TVsSAnZWagAAwscP/3ulg3ZJ/tO0wBNyVPpx\nbVM/Ek49RjJyrOGWjTfPMD4ChKNzA7eMQlVUT6bAe97uuh6QKwrtrRDTMQMQ\nnSHqffDAzCAiw8EgI5GXBtc5VdY0MKeU2iV2ouY6xXPPFAx0z7AiWTDAB8iz\nlWb8FrIDOquzDe1e/gaxtZkXBzvDMYJriEQ76axBCnP2mcnUTA5S24Q7fKZc\ntm3tJ+5rW8ETAqS7Y/d1bzuB4k5XwmDJSbc0gRSWMchRZnBsWBK3gdZa3/z0\nfhFeQ5zeV0TV6KTbz9ctCyahFnb5F0TKKwpt6LgHd7ykUyIbAwaXRanlchh7\nliGJ8ONvbanecV48+P6UZimOqusSg2PYZ+EpP0d50SBewAxPQduFLEBs+mm9\ncyRaN2777RrwcO6cV4t7hmFK8F6ETiu390NTRaq/4+EV7KNQaH5c00CSzJIf\nTfdeQs0bvvKY1FBrDNt1ufwp6j01r3iYhOXDMK10pVMRdWpqE7ajgf8ycEff\nYo/YiZqJOrSjCBSOjAYoLso65e8E0NAJugCSYmtnCwRAxH10R3q2I7ClSS9D\nnrv4maHMCC59ZQGJ+bYOHDVzivhw9dG9PQIbJFMbE2eYqIWEHEze0EXRfR/l\nJ7eKK4HfbkhKKFiUKvc6YHWfPZMBqj+0r7vw4yEsKGGv8atLGUHPndnFDw7b\n0yy2\r\n=fDmG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLT5nyMQddBd4suZpMrhBiYB62Fyajsg93qaGTc6365AiEAnYVq0YKsuTEacT9/X3xZ3xOJC6C/66M5xkivfjsyI7I="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.d71b65aa.0_1587508692258_0.9232097670146486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-select","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.28d10a96e.0","@material/floating-label":"=6.0.0-canary.28d10a96e.0","@material/line-ripple":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","@material/mwc-floating-label":"0.15.0-canary.58d51135.0","@material/mwc-icon":"0.15.0-canary.58d51135.0","@material/mwc-line-ripple":"0.15.0-canary.58d51135.0","@material/mwc-menu":"0.15.0-canary.58d51135.0","@material/mwc-notched-outline":"0.15.0-canary.58d51135.0","@material/select":"=6.0.0-canary.28d10a96e.0","@material/theme":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5h3RMAXZrgtJZ2Tlgr5dw7xlYqWFC+9IUxpZ7L329U+QQ1736mbevdG2DUoOp0Tmsu3ojHuDlvU6vMDA92GUNQ==","shasum":"abb2b5324362dc598de1069415c4279f5393aeb7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.58d51135.0.tgz","fileCount":46,"unpackedSize":876966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUiCRA9TVsSAnZWagAAkSsQAI5V8IpZMFf6lD08WZsP\n3foMarvmt7qIg9EOv73qKge6TJ7cxc/GxiH6ZJAQ6iiNB+f1W6UMQ6gDl/+k\n0NB6wM0ShKcbbJ1Bhtmi0zH8TQeqclOedNUy1Z+XdLl+THhD9o9LquOz0A+F\nVmBdvDVKlAJKU5BVFXpO9WdbZZNfW9NcdHrqUpOUwuAXLUf4+34e+XRiWm/M\nu6zOK96tLhrFCb5haqLJB04Au1S+KM+JiaMtRtZu33aKYmTp7XKMTtRqp1+O\n+zr7jA6cAeCqRir8WHPuJhFwQGK9w8WQnIhCZC9t06vjLGppyUKjLtOrNtpR\ne4zO6DRQyw09hII/Qfd96Iia+x7xj9letXgK2loOJP3yWtVbMok6Mj9dzRd+\ntX0ZlF8GHrZPN0MB2K6lwwGhKt6kCPimnKoK4NS3PtVBTSEcogQRqnwWYJ7P\njzJkSAh3CEv1nSaiw4Zxtoli482pt9/r1DHWwgIoV4vb48yyAqJoAaFNzqcm\nxGiNTOXla6un9oc9sJTJtRdH3Ht3jW3Rs5LFgBZqzUkC5aS+Jz3m+I8aIaZC\nqCINZ3xmj/t6wKjug6ynvKYkyOQtOZhQOPGbXPQ9350AEPYbjAVZbos0M2TK\npUhYH7RhXb7Kx1ySULbLMnUxXoGlkX3fzidIeLn68h4x31RFwXZGZASQwukd\nU25Q\r\n=9uEL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2cMiWxEedyVJr57ibtJXn+ORHWZhHv8IO+dH06T72FAIgFgCaXE73QHEEhpIpS5OxhCe7IymzIpOMDgWaREgTP8E="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.58d51135.0_1587602721596_0.1387430637107896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-select","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.28d10a96e.0","@material/floating-label":"=6.0.0-canary.28d10a96e.0","@material/line-ripple":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/mwc-floating-label":"0.15.0-canary.d0af8ba3.0","@material/mwc-icon":"0.15.0-canary.d0af8ba3.0","@material/mwc-line-ripple":"0.15.0-canary.d0af8ba3.0","@material/mwc-menu":"0.15.0-canary.d0af8ba3.0","@material/mwc-notched-outline":"0.15.0-canary.d0af8ba3.0","@material/select":"=6.0.0-canary.28d10a96e.0","@material/theme":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UoWpfTe2ZqdI4fKdxnCrw+yixJ0tsoEstwieJ2A+AZkS0dQEbVwZ6aLLl98caDv3hHmPHG4S3b/GEpXJo+YemQ==","shasum":"7b04b63bfea24978deade8c6b67f809aac3b8168","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.d0af8ba3.0.tgz","fileCount":46,"unpackedSize":876966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodoWCRA9TVsSAnZWagAAGoIP/RKBWT2UeAKWUu7ixoAo\ngtkWWxvuwzzY7zpw4ik/5YQAeXYjdm8nw6ZuNEXL85OVJp79zp/Htu9k+SRb\n/fSnXHhKrf7Zduqt7B31F4voBROQeDTSYoaVlN1kCx+p0mR19YDoWcc272cA\nAi5aU0TAsbFpN5HCwqC/Yh2y/9eTQm4aPG0qhmn5F4uRpC7Au1Uzh8vtHVZu\noSjogcjlku4UPn3Ph/i0xYrAY1JMQbcIRdBz9QtPhnFBCef6v4NVxyP1I1UP\n1jbQVUK8iz19bC+Wbr4BKPHvqpjedd2iJX0C6vXhafEHX2LIsWuytii5E+ay\nWzPCUI30U6bqtJzV3PoXT8dnBrNh/p/X2fT2nLb7TVoj1SXcEbnuRtomnCFB\nNzMJ0tLhiiYXdp7pokJJkjik4+Da6vrl3t52C99XrSCEDkp00uHiGocvj6YJ\n1rMtrAeTilXrtqnooQDysTuJ2hCTc02rkj69+X3mD2RAEcp3rAwhBLrYTmvE\nz+eZHj4pHgLuK5yKe0w835XvUIetOfNXyafi8nIianwOfAqshhTF239CIsJk\nXtN4EYzjt8uO/u8tzILfq735Vrp3DBOcOj4vk8Usu0QM+L2jZvw09zJvwo05\nWbD7xVJ1bC9z73dSTkPCAcU+XL1RkO4Ecf0F9h0rfpWxAuJ8taIKsowcN7Fg\neEre\r\n=D+97\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiLx0h8l4bffnr/nDuEj5l2XdEMxvAhxO6l9A4QaIDIgIhAOExPQX0uQGphZSoXNqaLbri2ClC4d3vmgSSctXnWGVH"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.d0af8ba3.0_1587665430371_0.17092124249486096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-select","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/mwc-floating-label":"0.15.0-canary.8872b17b.0","@material/mwc-icon":"0.15.0-canary.8872b17b.0","@material/mwc-line-ripple":"0.15.0-canary.8872b17b.0","@material/mwc-menu":"0.15.0-canary.8872b17b.0","@material/mwc-notched-outline":"0.15.0-canary.8872b17b.0","@material/select":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+Fsv9l+kmzJPgJicfLWxpR2UBSXeENJRc1lypUvEHAxj2moXoLC8UrbPY4NQOKyRIoMpDxntGa2gluXRgjgj9w==","shasum":"d9f58f9dc943573d8b17e59a7989c9c3fd1b1bfc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.8872b17b.0.tgz","fileCount":46,"unpackedSize":876966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof19CRA9TVsSAnZWagAAO5kP+we3h53vA38AKjCjBC8+\n1RNqIiD9H7FRteVI/+Q/8T3R0H3i3ZFdZNzdVara9g1udQ54lPb7ZtyB89dd\n/7dQEnMJzBDaY4BOezodif20zlUByPUADcgJJ7PEZ1nkwuKtNPdeE00cEmDk\n0CsyDVadqktksg/9dLHI62FpnkmDI9QGv8CNVM718LwSKHIjmNgKu+2niWm5\nbFfnDuDs35sCPs2Uq3U1DmmG9fNAswTwMWr4tEaMJJC/6vA/phSnhEJ6ZM7M\nEFSM95wSbxIxAAki5NfoKoDIT1J35WXu5WGG7m68xTGklRzkWd22FpaI6rjL\nkudWeQzDA5q+hgw87C6Y+q1OPEmorXYpTDCqqhMOoQpr1tJRe3wcdj7zuLU0\noRxdOTIapnnkEGWxamqg00HcNATIKYfMvDJOWk9z4gn4Ti5e/yL7Hjeo+WS9\nY/ln9PRARDQyr3WgilH5CwOxpUaDFVfJmHv97A841Ck/nPbTiO85va1UlouT\nHP2NmQTCNXT81ulh3Lx+Y7cRCdfnsf8fihoxNTqSzazhsxk/SRCE3AjTvbOC\nv2z/C3AiYaRsKtd0tO8xquSlfd2ZrM9Ov5C8ws/554zuQHXj8sqhnRx8UyBS\n7ui+CEBueZwTdWWP4Nft9n400p4LZ4KR+LqCTfGJedqVdXnNyo3h+9/rjRrl\npY/E\r\n=oxCI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGWDCWzvgwv4IAXmZRfqZiBZXTIiOGtIr++flMXCln5QIhAPSOFD/eOb61X+/1ICRqApw3c6jdNb0frmCSK2TGoeaP"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.8872b17b.0_1587674492598_0.9121671998569396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-select","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/mwc-floating-label":"0.15.0-canary.eca1a610.0","@material/mwc-icon":"0.15.0-canary.eca1a610.0","@material/mwc-line-ripple":"0.15.0-canary.eca1a610.0","@material/mwc-menu":"0.15.0-canary.eca1a610.0","@material/mwc-notched-outline":"0.15.0-canary.eca1a610.0","@material/select":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fgsJcgyuUPqhG6/u7HjTV5DZhJ51YMTTdMDEXLvd5cQ1bNHv/4DyImpxB7yIn4iazIyw1L0Sb8n7j+JlCqLXsw==","shasum":"b21dc39da5f2193955b4dcd928ded2862e1be589","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.eca1a610.0.tgz","fileCount":46,"unpackedSize":876966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogwHCRA9TVsSAnZWagAA2q8QAIRMpKbOqc8r2nI1EIqi\n87cT5K+G9knEi1E7tOCn10+sHYDGVQO98Kl93ImaHdIbaqHh85YhEeUtKQ7t\nqYiyheJZOSyG/kGhkPusZWaWJylw+bTWkEWDD+rLF7cAaWdZ7Unicp3Mcy2o\nMl5pJBKRwAE+HjtXTrp0nSiNzrqrT0lsdgQDErQKQBira8WzamImUj5aNDW9\nHGSE/ZYLOLv7DFb4z+YCg8U8cFNyRhC4Y1OpX+EWyHf940ZxMELg0ZE9pakp\nrfNJ64VN4+4vkypKNJkAem9DRAPp1BSRhsGRiEiNlWcxQ9KAjSUL416c7zYx\nHUWPEF727a0IzRGiQ3JBavHt6vkD+glICuoa+VOPpfxqj42AZBjjQN4C3JjV\nI32HgDyLvOfIfVVzAuvov9WlXHR+fXV4wt8ydbbqVZ2HqSwrrXs+YcYkcbWG\nli3fPiqw0QrhJW8DHbaFgoGfwyN6N2uxYTZRioyQxSUUvzieuufOpf8Ekg9Y\nM1OSUbrEF57T1T0XTJTTf8lIldX8k/Or/pDwdZu0TttI6YxT38GwGGtoHbwi\n0DbksmceNilwQ8azwd8DAgjUjgFCIVHhlHm8TtWQcsYVoqG0Hg627mxRtWwZ\nP7jFx48s5+sB/vhQ6VnsWZfhbjwie3euhlnPFmRfdBmQsEVzW2ciaOtEdC/o\nl3pF\r\n=6KD1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7AA5MB37xu4pTBaI6y4IUplYnSw57dIvniL9q3BASmAIhAOBzeFZcdaR9OeMDdakIfP4vDIaMkt1w3f5VEnHbCRoA"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.eca1a610.0_1587678215160_0.2130697210306527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-select","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/mwc-floating-label":"0.15.0-canary.baaf529e.0","@material/mwc-icon":"0.15.0-canary.baaf529e.0","@material/mwc-line-ripple":"0.15.0-canary.baaf529e.0","@material/mwc-menu":"0.15.0-canary.baaf529e.0","@material/mwc-notched-outline":"0.15.0-canary.baaf529e.0","@material/select":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-enelyNW8JEP+DPYT+VyuCpnwUolBZDAKsk7XoBP+9jeHibEBsLjzaP8ehHTcBrgEau2+estRpAu4fZY+2zBuDQ==","shasum":"89fa3e266fc4061a5d626fda7ba15981795394cc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.baaf529e.0.tgz","fileCount":46,"unpackedSize":877251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpmCRA9TVsSAnZWagAAAhoP/RUeAq82LhikH1dfA5RJ\nSmJEYCFM/XCAO6HlidXbDbFUJNgUm1ntJKwW87sUXmt5EJ5MspjdmNavJUzW\npLHihW26R6BYEvMc1DkN2+7Ib7/zQiN+C5OUU1f1RSfMZCuI92WQONw/QR2I\nG0Rh3ynR273dcY72f36emr4bR1lRLYqs7V3JKHe0ffIIfc6KzzS1KZhLTXyT\nOp903G2SOxCLldqbep+J6OBno/TnymZ5T8xoNxw+0WFsNd8lfU8HVfgvOeb2\nBPXE/nt6M71b+o/MUfhT620DN66QU3d2ar2+/sJF+hUEwalxmBLW+PHQxnGH\nXYndZujGsWg+yVc6b19kw1EuAEID1JP82BOsKRu6J9AGE3HdNoUDMZdFXaGy\nBVN9YNrs6Qf9UVIVIUcxz9fVwKbYebAivkX598EqHE7qHTFMGuQRRaJX+MQc\nVnX06HLLdqLfTxBvGJIT0PNRzil1fzZA+GN/mFk2ocon8B1/k5OA0mtTVAd/\n5iMXrSLZEG62NKsZAxPkZrQNyeyqZ1fDAPf4UTMG/cQJFPKzQ+UYQR6edlU0\nonZYjF+KyxHGPXUtmGuTA1oTj/2iR9K9j9BrsOOL3E+dYT6k5KjcSkNT0DS5\neyE0MA+HLtp7EvKAvXqLtfCh+fa2CYBYR878RbUPwP/s0Dr46CmLhPJQ6lxE\nG/x8\r\n=pir0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCP/KlTEuycXOSmnSbmxitCAdt6YDwXWEucjIdXEyK/7wIgN0wU0zhaKcwMHgbUoV/wuCHFMJa8DiA8rkczGP2FHSk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.baaf529e.0_1587681893978_0.011575968901680112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-select","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/mwc-floating-label":"0.15.0-canary.7a7992a8.0","@material/mwc-icon":"0.15.0-canary.7a7992a8.0","@material/mwc-line-ripple":"0.15.0-canary.7a7992a8.0","@material/mwc-menu":"0.15.0-canary.7a7992a8.0","@material/mwc-notched-outline":"0.15.0-canary.7a7992a8.0","@material/select":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YHre4AXXfdYWXcmrmYtk+p1cLAHjng9WE2sNhJDhLgb2DMwuFDnu8FhucfqLd/tVfPXr92WvMd+8EDEkKCUN4Q==","shasum":"d98f970d886f3d0db2340c9b05bef93329a9c6a7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.7a7992a8.0.tgz","fileCount":46,"unpackedSize":877251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFtCRA9TVsSAnZWagAAWxsQAIvkuwPJAbzWMUgVtXx3\nOzPgHLOpgjqviiWO/R/Y59Z7/96ixz8P5wq0W1KgvmRYgubL8xRhjbbVn+m7\nc1sPryFZEx2k3JoX1e73oshO3FrqPPObd1kQnp1YjPIRDO2lQtuJNV6x31zs\nrjKDFSguAXs7wkdpawbHACM9vc4laaUGy7Hw4bBQ7CTHPYhJL1L0q2GczHfS\nS3Qz9yRQMGpV73HjR34cnxDMGo5fyNSnV3h2ZIukHDCn+bAKRWbTMXYMWLtj\nSx5yRda6PqS99d9FPF7398j98Lx/ml9uAqhYflIa3jHuuDWoZ62uPpvHJeVz\nniFkyqlCidvkeRM9mqTk7SqzgKW/Tfkqb5fRr7/jgyGITK3usTEMW89uQ4RN\nmr7hZVGk6/saKnqOHXnB2avs1FREEqvtpqeNv1q2nMZM6iDgGwpicEmf5erL\n0HYKlqN3MRAl+yd2oGag6xGKYJLV57zha3KGL3IC4vKRsRkajipBGvaB08LU\ncqlhDFNgj+Z+TTCm8gi1HlQItiTdPhAXOk9LOETy6lTxBWZU70TTjmKxeGQ8\nZNUoDYcw2gY4l4VZ3f76HO4qorOKZpu3HEVF61a4DJBJa7VLKwbNIwRFjky3\nGj0yjJVVr/tNgkdMGzfbXicQXt7fSMQnJhk2rmTBgISd1utXNDrukW59c12h\nBIjP\r\n=1dGV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXC9iBY5m4u0CZWUD+D7WAMXPb0HGXAF1yBENNdRcNnwIhAJv/7i/j7Sj47RV6sqMGZjRWWafARp+5wzGTLnQqW0aL"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.7a7992a8.0_1587683692704_0.9769139138460423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-select","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/mwc-floating-label":"0.15.0-canary.1150d64d.0","@material/mwc-icon":"0.15.0-canary.1150d64d.0","@material/mwc-line-ripple":"0.15.0-canary.1150d64d.0","@material/mwc-menu":"0.15.0-canary.1150d64d.0","@material/mwc-notched-outline":"0.15.0-canary.1150d64d.0","@material/select":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CWofepXpQxc0i9SvOtWiNY7P1GWDG2lxpSL78B98QMiErTrqF/SX4rgUc2AVxHVP9IBOvOk/Ss9Gy4J0x596tA==","shasum":"486a9c2f14d8b124b288761fb2aa24335543a48f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.1150d64d.0.tgz","fileCount":46,"unpackedSize":877251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojB7CRA9TVsSAnZWagAAO7MP/AvNjK3+2+lf41GEn9mK\n3FE+PQLm/8Rfd1v6J3xeqRROj0J26maH2kG+g4VF94gGfOOqpfo7uJhghjT0\nRkUer25GXP1GTuO9cZL/661vOCXz6gqZuNB580ETDzMHOFB6mgEXchBtLPTR\nXyQCJTwYZ1VbUg5OnB+ZKwjr9uCsWlUUTg+P9R+P6F9MCeECznbvaMuCYJoS\nIVpvkzeeny1juLlbcJIPbHiuyZdmIC+avN7CN4mVgKpFEq/4+oL4da4dUMRm\n9Qz51ngH0U3Rh8wFD/j4d8Qtw8cH6IPn0tj3su3KNpZO0NBdPj6NsO++ZfYK\nZQw5UUCQhV+5iTLNhhWyTuvxQQPBAfRCk7/TnAhmgMQCsk0ryLN0af1OmCE7\n7DDAGkZGH23BJ5wuzVTLQIcx1BqAcONBOAr4w5UkTcGTg14iw3ZD3Bat6xYX\nyi2BK689foutY4YRXpqIjtO/1DPkVCCY7BEI7JcONjARDU/z7IRjE0h+wtk6\nogQP0Y4Jhxhet7x9jzrzYlMvUVDdyYDhFKoB04doM8ZW2JZXaiOYGOd2OiM/\neAK0lC5U34xwlhyTOzoeG61ZPVwm+NOtj7SbLkZA4ALHux8mjzFtJ+yNHEnZ\nC3h/V9CVU4CUyTH28sIJFGvlpyd1p4ejtutLslsfqV4kjnN7b/iiaGE+cgdK\n0MJ2\r\n=kIX9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmY35TxEMnLYtN85kWWAYY73r9NR7zKnIVchjJ56KMhAiEAywdI7V88iuqZXthRsndnBceQuoSpAwZuPa9ici4Nbfk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.1150d64d.0_1587687546788_0.1360368095857063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-select","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/mwc-floating-label":"0.15.0-canary.dad3f828.0","@material/mwc-icon":"0.15.0-canary.dad3f828.0","@material/mwc-line-ripple":"0.15.0-canary.dad3f828.0","@material/mwc-menu":"0.15.0-canary.dad3f828.0","@material/mwc-notched-outline":"0.15.0-canary.dad3f828.0","@material/select":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PckmGnoGJ19GCuX0rFD3pdXSFKdMaGyrqsGcPZuIBMf5mm1kLQzjwACwePVEG+xyyAt+SYnTCCyCd5SldYHUJw==","shasum":"2f3c004835775a815f36d544ef47c275ea35caa0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.dad3f828.0.tgz","fileCount":46,"unpackedSize":877286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eiCRA9TVsSAnZWagAAam8P/0wcOyuCu9Psm5Qu/yGt\nRA7PgnEikzmd6x99ZEPKTULfRPue4v/MCNoHRKws+V2XvyjUaNxBFqfjcscv\nxdOkseBNGjokJhI2p6e/pMChbxjy73/qOEvQ6SmsnPc5/y8VB3iBHs2gqwaf\nNkLpCYFg7cY0/8wPUHhhbpjxYr0t16NtH0NgZMRUebTCjQkIQ85iZs6kFC4u\nJ9hOC1FS/zTe4DDw944KoWhVCeHRke4mND1ZTRbjClmSoOvvYmHAX74PkrFF\nUIJzuvXUNRsH3rZslVVdQ9B3CTk9S7yOmBzFTWAjvC0o4h/3MRNSuUBawRDJ\ndBP839Lwldl91tbdZkL8MrvlWSv9+tcfFwX4fREQPIna8Mox3AAp9NopGTQL\n1D62xH/4jALZcFehr111rmIc1MLAOlxLHrdAvyjvrFBtcScae61Rsi730dVU\no2BDE4z6DfM155cnMyh2SH5QIu/IkbXX7x7mUmG+YcFp6NZIPHzifm7DhHvQ\nuNcnvK0gyN0ZtkbO/0WCPO+vLqIkmnJ5N4hAtOhWYxZIt6hzPjaNFXNSpIjf\n4GdsfbcLhhQc8XK/OgZKVuiQBiYr25dQocnzOYrxW/QFdh5e/8Cr2SrJ6BIO\nW02X50ywRQduA4nhDUGXBTbTDduwFlwNRT6ULNSQpEA7E0p8MLeRh5c6+v/j\nTHkJ\r\n=Cueo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdZywaxPETSGnjsDEulRg9nW3fPjR9+esU39+5M3AqagIgG2K6NZY6eNIzJA9/ueDjXuErMosy6bMmIdbKE7NOCMg="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.dad3f828.0_1587775393807_0.6249036070123428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-select","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/mwc-floating-label":"0.15.0-canary.1bcdb47e.0","@material/mwc-icon":"0.15.0-canary.1bcdb47e.0","@material/mwc-line-ripple":"0.15.0-canary.1bcdb47e.0","@material/mwc-menu":"0.15.0-canary.1bcdb47e.0","@material/mwc-notched-outline":"0.15.0-canary.1bcdb47e.0","@material/select":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-W2xkIYJGgbrgkNIrQevFU94/cuSRFOG8nsOVsdMK4QMzkFdf9HhSbqmOMpYxG3YSUXZ47iLgK3vPEKZ67aYS3g==","shasum":"edb793bc7d7737245c17230d6f7547d7d277adcf","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.1bcdb47e.0.tgz","fileCount":46,"unpackedSize":877286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MpCRA9TVsSAnZWagAAvlgP/2ulssHXWFrBRvfeiDz9\ndocILmndYpgfyLuWdBk/b551abP+BWe7D+xqxF7skp0EiZMGGn7xlFFzDqHE\n7juIJnqeQehsbNxmItu67fiEGtBy/RYCarMKysw2aGyBQjK8ucXLz1seA3m5\nXs22YPcPPARp7MKoyuNIjg3x0WQ8cCzsNdXfeH5fBRqGSyNVgXzU4F6r4QD8\nNhY8+sqWkhjuGA41rPOQVBqlaJt1I4UorAEZQjZp/6+rTCkaXVTk19CBdKY4\nTbj5A2XLVdcplYNcU30Y7NElrlidz2QX92FPkypG5G7ksPKHXjyVkHkSc2gI\nXrfGMVp3WRnXuMIyPLdt7onDG42fAU5f4e03qt5ZK1ILhoSjxnKLwvNayYh+\nqveftNO6axcu516GVYYmXeqSPWUrqxbcAiu9sygoXrFAhDGpQ6EtYP1YmEtn\nExFtqhf82v/brr0YMOLExTtcb0FeZ96rLsu1EOqkUora2qsLE2gOd8zcWvdI\nTA3vOLODvM8Uc7ugmPgmOQqh4ZgUqZCuXyAL4smU+Xi0ZiJaHhiB73WZOEj0\nxrEfghVuvl3M2IkY2h0MjcTS8Ln3rmpXVD8+GN1/e1KHHsWooxQTWNa1MMRS\nQdieztU/OYvt5TAfRx3DtKN+9AYfJniktD7aKxWOUFagj0A6xxxErdH9kTIy\nyFo3\r\n=LiVz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbWP6T2CpxxgdFDiiWSzGNqCZYSZwEOvOwIOXyoBaXcwIgcaJD5uwCHGffRfUhRfd3thBZtmwIjnS1XawieJOlWaM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.1bcdb47e.0_1588036392976_0.5475871062430986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-select","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/mwc-floating-label":"0.15.0-canary.86ff1b9f.0","@material/mwc-icon":"0.15.0-canary.86ff1b9f.0","@material/mwc-line-ripple":"0.15.0-canary.86ff1b9f.0","@material/mwc-menu":"0.15.0-canary.86ff1b9f.0","@material/mwc-notched-outline":"0.15.0-canary.86ff1b9f.0","@material/select":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DC+zHoBuifqEpMpri7UvfsMPdwAxgQiJXIR7WI2rnygJ5YqER53X3UcahZnvz8UnDacDcuNal6D6tRleb77tHQ==","shasum":"2472dda6402403ad6634b620f9d750973ebea7fe","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.86ff1b9f.0.tgz","fileCount":46,"unpackedSize":877286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5tNCRA9TVsSAnZWagAAIM4P/Ars/Oh71c9kTJU9gOYY\nQuaTq8vuKg0Qj+BkVKhRS1WFiiM6rvXc9BbXndVh8FxI6gvsJ7tdruC74Nv2\nfGjepZ5vgxgzPMF1J+HRp3/Qayxuz/a1CyVPsJ+aN5XXCmeATRz7VdZJXcyv\naeviYco+LC88hHRmLPL1ZmI4XspP43e86I2F4sX2zlaWNM9QCHMPgim87SLp\nXGggb8nu1J3+Z6VJCK9J0V3Muzn6IqdemPnQ6r5101nYYDWEJnsUg1dqmW5R\ncYrNAFaPWYKcBGNM9AFzutIY9JjaLyJjDojfKTghjV6l6R3OEFFdrNxWyzHl\nSiI0Xk6V6ykDzzNEbIWn38q8A4un5+vMHU/aQBCm/+ZyNbCjImzQrNN3W1R5\npQbAOCO66nxZavmkYp+K1tbjAWuJYsgq9vSoV1+r6RhAyxyQPuG+yhGoEAsY\nKFqjKuLhe8XzZsdhoW1jNxZ7hIKNa+4pSk73eyqj2Mf5eRD2E13zij8IgBxO\nFW7zKrhjTphlMmBOlPToqCuJGOjHVPD35/hdRKn5BH7HlbeE2WcMWBsXV4UC\nY2+CCrzM6jegxgY2bEHN8jxy0bhiMZ4fIp0VLzychGDvvmLn4/wo+sHirZLM\nIqFk0ElBCK8L40ll7nM/RbFrCAy+5v1gYkLtLAefFqQETJp9Y3JBaPjX+qiO\npcsO\r\n=Yx0C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChPkB9Del3fSysCb+rJOHGYpxagyk+WYi6oyyAzkOADwIhALWzSY8yHGhOGpVUSPDfZoiu9uI+gKGnB3TYmyXfMybQ"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.86ff1b9f.0_1588042573516_0.7377261923917322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-select","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/floating-label":"=7.0.0-canary.28d32f8e0.0","@material/line-ripple":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/mwc-floating-label":"0.15.0-canary.54a86b20.0","@material/mwc-icon":"0.15.0-canary.54a86b20.0","@material/mwc-line-ripple":"0.15.0-canary.54a86b20.0","@material/mwc-menu":"0.15.0-canary.54a86b20.0","@material/mwc-notched-outline":"0.15.0-canary.54a86b20.0","@material/select":"=7.0.0-canary.28d32f8e0.0","@material/theme":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8qV0Of1Tv+LBVzVZqJF/y0R1Ajrvn8zzrDhbwAgMn7QY2CTHvqLKTJCrPnCguZZZpb6KzAIP3azy5zUX988YxA==","shasum":"28907ea4286cb3f3b8c248df9de629f453250d8b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.54a86b20.0.tgz","fileCount":46,"unpackedSize":877370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6CMCRA9TVsSAnZWagAAb1MP/3C7ttT8EmyvBCCPX3NQ\npHOLToU40sVrWSJIZ96tjsnS6QFJhth8uAq7LuXyzMIuqpqXlwARJRNDWuWb\n2KGrIVt1eMHP1SmOHd8FpS/tJ3ZYuro5WMvprHy8oRZwTgN5NMsFm5iPu6M+\ngLlU0pJuq9AJ4KVLetaRD4wTkvWHjmJJqqENTXFyQ5fycEzsLiZwM2y4UxOd\nzEfbts3oz2eD6TzyFS5UGQdCNNrhi/DlapeXI/UYWm3Zd0FGXsI3mSi50qut\nZu4GyVWYThDkxLxjLlqN219iKYiHhXe+U3whM5dv2qPIXHWK2FKGPfJQajIP\ni0m62luL1jz83sUyDB4yx72OsDekWoiMR/xyK7dUqWKBPL9+SwahZamfT1R5\nKO8x2pyjIo8AIiXtPXocrlkoTEv0GmMappCfNs0uqX74AoYjfFK3aAqLhuRa\ngq1wbToaByE3AD36V2x9X77jJ1HnAxmj5DYxITWEPNNHtPy1l9uYs1+qtf0f\nwOmZQdKRwicUMk36K2gwBcg6RR0deaBCCxyqQU8v9vgD6MZXFu4cLMIhSdHl\nHYPPRLDbiwulV0XGCkekRYVW9pHvFbVHkC7jlj9gM45gTe2murcPnZ+3fwZM\nJrdqGiABntXZh7syps/3XR7R4yaKtAM12RU+rX5tjvurq22kfNFCVyWwSyFJ\n3rUs\r\n=FVPk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFG/0rKiaG3oR5NO1hPMtdYbtcqUuhW7gmjgJbzS0CpAAiEAtjMN6UEqf1WJSszJJ89TjE3rvjcESnA/bwhacpSq064="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.54a86b20.0_1588043915800_0.7433615931345487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-select","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/floating-label":"=7.0.0-canary.28d32f8e0.0","@material/line-ripple":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/mwc-floating-label":"0.15.0-canary.938fd24b.0","@material/mwc-icon":"0.15.0-canary.938fd24b.0","@material/mwc-line-ripple":"0.15.0-canary.938fd24b.0","@material/mwc-menu":"0.15.0-canary.938fd24b.0","@material/mwc-notched-outline":"0.15.0-canary.938fd24b.0","@material/select":"=7.0.0-canary.28d32f8e0.0","@material/theme":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tSYXBLWDbEok4V0EboiayTsAg5VC5EsGlQYycdki/Qu6wMpTm6jWs2k5JozYT8XWbfWm7PjtJj+3qXs5QzAcwQ==","shasum":"238334a852536b51b3f274cf1a2f0816bd47e78c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.938fd24b.0.tgz","fileCount":46,"unpackedSize":877510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqimRCRA9TVsSAnZWagAAmuwP/2tTeNJ8LwkZwxo0nH/k\n9SmAm5FhQ1vRCj661aCBut8SH4glisRx7gfhpdVn+oBaz4f+0mxaat8Vb3mG\nVpmvr0IWB+j5joBYfgLpFdrYmfOXk46Izluz0sAsl9lplu50UAJBYyXo43M6\nN3xWwE7lpb4fIqqREzosFTe52ETLk1um3g9NW2q5wp/JPpV2dDbsG/NzP0QG\nPco1zEBxakUbJXSsN0j36/+as5gbCJcpW+3G6ygJBByel1doN1mV/LlzXTPP\nEy3o3YQdB6dkP+xF1wDTPaRpE2AwBEcWTYvGGHr38KyjBlvu2b6Cd2KpYvuB\nlmcGJpF2eYs5vpQn7OtZ05N438GGxjMF536nzcNi/cXH3zXkEmHREKsbdQcN\n35JfO0e7zxhc9+NtwRc3XA5VsQ0RqufXUT5qn8MhrRLO8f7su+bmz+mcietA\noXhD8dOtFALWB8PlwhK3PgWRyk55WoYWYkp4HExgOpuq6qReAEKNYOdT4TvG\nfjqqzDmySoZuijRqOvAsRSP/P173NfWebOPVuGEHA4ZaseIU10OprQarhStO\nTbR5USi97w9asFiW/Rk36Uj2GG7vlxpjGz/ju46UOAgXGywchzohMiEupV1O\n0mD6fIGiuPHFdCVKfX71zymOtzjeun7TC/ptB+y9ii0X5ESWZ0KXYLhscGEA\ny42S\r\n=evN8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0r3L7Ag4khRWC725o+bX0KjhI71MvmYuYBwhEh3Gv+AiEAom54G0/6j70foplLmO2g+JT6iEMc2IX+nlWhCpP77Ss="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.938fd24b.0_1588210065246_0.9879633296211967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-select","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/floating-label":"=7.0.0-canary.28d32f8e0.0","@material/line-ripple":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/mwc-floating-label":"0.15.0-canary.39e9a008.0","@material/mwc-icon":"0.15.0-canary.39e9a008.0","@material/mwc-line-ripple":"0.15.0-canary.39e9a008.0","@material/mwc-menu":"0.15.0-canary.39e9a008.0","@material/mwc-notched-outline":"0.15.0-canary.39e9a008.0","@material/select":"=7.0.0-canary.28d32f8e0.0","@material/theme":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SWN+lC4Br6dZcic8wEcmlTLhJE20gUcNFp5REZk1DF7xrJKRbn/AnTXnKKqcJMSckYNiZ9o0holniDJUkcioZg==","shasum":"6b21c28e5395184796d110e4b7cf0b1a2284eaa7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.39e9a008.0.tgz","fileCount":46,"unpackedSize":877510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRoCRA9TVsSAnZWagAAw3QP/jYNmAEFB1mdoI6IVwl6\nAen838Ev5xeg+hr3akTXgq4NFn/fRXrz9az0C72g3gDH7P7GKpuJ/s1F6U7J\nwXZqxHRppievqEZoMYecWvh5hUWFNcj3HYOujsttmmH3uCRGK20U/BIA2aEE\nSODnmUIYmcQIxwtbuwZZFL6WKKLBkOmmLYM3G64yZlLlvTkmPb0gdiPu9Kib\nJFG2rh/+meC+DiP4CwmSU5BsdhpVZKCdaveRJ0A1tyPYAYnNDrciWoNy29zA\nSkIJJyaCW6kobpTDQzklMqfpFsnZjLn0Ct3v27SwYk5g4Y8eZIoV1e0H4RXJ\nTWoRVe62q0vlYXMwmyJztBoHYfaA511s07VgS0NWgBqVuCyyW7FdJsaJXerO\n6PJnd+0H6z04ECccngrpQITd/gXOsv7Q9jEenmn+Fzr7SPizcsom+sXs3cjI\n8QI59nCrfk3SyT5e7ZdMJe/ahfSmdUAvrWbckjlO5dXgVTuyv5HMiYclUIzS\nck/SQLlkKxsNxLKeBtIMpogylBNfEn3aZ6twG1XO8+qtpaJi33SoBAnWeJXR\nAifpNYT8zMspr4D27aNWFt1zm06sGGhEGO04K+C7f2NCPGvzFQJQ/VCz1KQ2\nY9LVompGxpvt9YaHXXYjLQNkBcurnUdudJ4zI6yUAuwTo9sN19oVeg4KANGs\n7cLg\r\n=CzMB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJyAnDrCrlwWS+7mJ/QH/0EkqqaXkjkoB+aHZhdoLR3AiAOyUawCwXgju67k6B6CzG+fKvh+zoAV/GSaFy5WZx5LA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.39e9a008.0_1588212839998_0.10460228522246107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-select","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/floating-label":"=7.0.0-canary.28d32f8e0.0","@material/line-ripple":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/mwc-floating-label":"0.15.0-canary.f3b365de.0","@material/mwc-icon":"0.15.0-canary.f3b365de.0","@material/mwc-line-ripple":"0.15.0-canary.f3b365de.0","@material/mwc-menu":"0.15.0-canary.f3b365de.0","@material/mwc-notched-outline":"0.15.0-canary.f3b365de.0","@material/select":"=7.0.0-canary.28d32f8e0.0","@material/theme":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+ZoxU0MLRk8c5JHs96pmLYrvWYGj8IcBYICMc+wqYL65/tpr/Ihn6F/Ltl2C5lsVbQeLLWiA0Zikp8750I6OFg==","shasum":"2fa68537ab3e7ce891af4084fccb6f54466971fb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.f3b365de.0.tgz","fileCount":46,"unpackedSize":877684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowKCRA9TVsSAnZWagAAWjQP/RoVR1XFtmRS7FedLny6\n7ywieNhCeyVHxYTyK46rCenJH+lhHBY1qBcMt4i4pNV5A6PYLEuxtJsaL43D\nQsuXGja1FMTbkPHnL7slDe1tjulr03jRccn0UC1Z0kq3calI1yyhJRZ8JqAJ\n0Y35+ad2b0oDC4iQvOhQBjFoAYfu/uuuzAUSbzKy7QUFKAIZrf10Bf8iscch\nbYnVSKrfrOTdAxttb0JjxTB/+XrWc2RLJ7GRfMEQEpApD/TDguCOv7Rj2k0u\nte+mDynqSPMnvqCGsVbA6JzcePupXRlbVqjbOYUvCorbFJrJa5N9uiCdGGgi\nwz1H8+oPBaDUPgPeKLmvYM9Pd2iafvpTb6z/v3gz51XcFes7HdOzAId3vNTu\noWKPHLnW624esohmmWKJvP7d3kRk55PmPk3zglRJmeHNWuCN4/iymlkOJUCn\nh06bBAJGpcvvOpr8xQ3d35xwgtTvg4UsMHoMlIlRpXH/RbjYF29b8Qc0hZ0u\nuXceCA9QI9ZQHLqfTN22PwgwfoJTKbAWdSZnLNUHO3Hqi4NhITqawPbQGJAE\npWvoU1YLTtFQBji2YHCKtyPa+u0D3T74qOItXsjLlxGcZXtTtaTclcLglApu\nV5BXfBpefGZlUCe/qXyl958T6+lU3U1nArgJP/pJhcXrHTRPPdauUteffc74\nov0/\r\n=N683\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhUOFJZXg4dx7HOhmacyUPMES26sglvczoA3vgjARQTAiEApUwYwG5sSRj/F08EJsm0y5IgDNyIpXh0tu5ihLQzlkA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.f3b365de.0_1588235273859_0.7761149866444961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-select","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b0f83d2fd.0","@material/floating-label":"=7.0.0-canary.b0f83d2fd.0","@material/line-ripple":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/mwc-floating-label":"0.15.0-canary.cdbdf807.0","@material/mwc-icon":"0.15.0-canary.cdbdf807.0","@material/mwc-line-ripple":"0.15.0-canary.cdbdf807.0","@material/mwc-menu":"0.15.0-canary.cdbdf807.0","@material/mwc-notched-outline":"0.15.0-canary.cdbdf807.0","@material/select":"=7.0.0-canary.b0f83d2fd.0","@material/theme":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TWnvzySMIItAQr04b1eBnJPFYQHPc186w7HD49Q+uicsc8KmfX2twz4BIlIp8RPeY7QnrZAWrxxU4hwK5UYLeA==","shasum":"5b98769ae1ff0a682bdd781aac9c2d7ad3278ab5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.cdbdf807.0.tgz","fileCount":46,"unpackedSize":877624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2oaCRA9TVsSAnZWagAA0NMP/1D2c319E/e/aczQ/AsV\nU0IBCwXSJmWwZC47x78Dbb6Hx2dwCAYldyx5AUHaU+LwztZfBRrODLxRiqFB\natXKjyTYXSl1xUcws+2877F8L1L5Rcg0HEjew8dgW0JGADmwNFkBoNOOL5hR\n/YD3expCwV6NbBmG950H5kj/kxsnCltoy0ic/w9BEE9cfC6V23lH+Pi3IAja\n9SLvW8HzcNKFaRmSmI7HD5WzRW1FZoGASp7giMClvfobJC8sd+gUHMxhaAlk\nWh6rjUEmaV2VvzNUmHNf9tN8nrKq1WbnypKJ7+5aWZzLqnxyJ1t704jFgh4D\nlf378sjbT9a9YNjLAXfvZrZKC9dJS/oYBzjgnHLm63XllP59Euvv6Bck212z\n5/jlQmDMYfRDIBBV10mzFwCo1rt9pr9LCwYgug5CEIEX9vNUSm3cQsvwqisP\n7ya88XCJ4byAmt0L4qgekt03FBrjK6cCaZAzQUWCfJq2PF6L3MzDMAhX4OeH\npzQtSC7w+/vsIlub0zLB6yjCiPTuu1ZHXklCfpUHPfVi5nZ6mW7f1HBwkVt2\n4qIVSAhTN2yYmdX95thadzMdM/pIysbJAJejijz7s7qENgAz/FdizN8S+7SU\n5Tnd8M5wNogrdnH4ehJ1KhaUhIC8U6QSIuCpNLSeKgylHSOt+3jX3uf5gKxG\npyZ7\r\n=03LO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvVXRRRm8LVXN+pk9VrcsnvXoPdWub5oLb7jZ/xpJ4HAiBNzJ5wlxgr76j/QQSCxt/nggD5YgPyzAe/1IkhvRr7AA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.cdbdf807.0_1588292121683_0.3070809253922526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-select","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e59906a57.0","@material/floating-label":"=7.0.0-canary.e59906a57.0","@material/line-ripple":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/mwc-floating-label":"0.15.0-canary.9995ae17.0","@material/mwc-icon":"0.15.0-canary.9995ae17.0","@material/mwc-line-ripple":"0.15.0-canary.9995ae17.0","@material/mwc-menu":"0.15.0-canary.9995ae17.0","@material/mwc-notched-outline":"0.15.0-canary.9995ae17.0","@material/select":"=7.0.0-canary.e59906a57.0","@material/theme":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_000.png) `#000` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/select/images/color_000.png) `#000` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n`--mdc-select-dropdown-icon-opacity` | `0.54` | opacity of the dropdown icon.\n`--mdc-select-disabled-dropdown-icon-opacity` | `0.38` | Opacity of the dropdown icon when disabled.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zjgR22UXIeNSD8/Z6jF/pcjboOkTeDCnVQM2xMSDjS8cTYXlWI6IUcibtP9WwhWqVhbkMJJ/SNO4LN1EXOn1JA==","shasum":"22871f7dd1a0fb98cc4a2f025d50a04df511aa32","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.9995ae17.0.tgz","fileCount":46,"unpackedSize":877624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG5WCRA9TVsSAnZWagAAPIUP/AlkI2yWrfMdWoCAtrBR\nZGmUOehHSNXcLDJGSKQn5Z8KthZS1eL9SYMcGzY1tpg6BOtTc+zAkqUXH/ep\nwiQelAKtmtijuBeU0qKwfIBbg6O6eH6PqTMGASQtAkQYMC1rrgTx9T9WhW7Q\nwkMTIV8yeGy9b0RsXS4y3aFzyTwhxNoKV1OKLU27QlQrPAdBVpTjJWuqEFsB\nHd5lFz6ivUkjT0fADJS2AsFN8wszcNAAKw82EDWAgAbNzEGQpfDkOUbGSbLJ\nS4wzZYgKLS+L4iaRp+q/D6xn92IiQOJ39bbzulF8vtRPG3Ddl77XUsBdz9zc\nDsm0N/Fbg4P1Bd7l7vHUUFrdkyF/NW8h4cDr3StRCXQkYaUjrGylTqwzKzXx\nYaxnOebf/t4l9Z8HFICQym+lmhgEQ56k3V+TJQ2ihqZ2RmO/WScpdtZR5Wqz\nE5mosGfgIFc+GLPqRtX97yCF8qXn5Ek+k1LA7VBaTUasyvGhkDffSpppDGW5\nD+Ugt4GRPsy2EKGAsvjTlcA6Q0c129IDIcwFfBKOa/tbmq2v7WM8skwc1qQk\nX+PW3oLvM+itg+9E0pLLfAIzUMljZHkZfB0v9+nRP9kECQUOuWdTx179Sf3g\nzwuax1KXEecFK7nRWWcTvuQWfKTfNRMB+8/6lSMM/4KwUutkNfeUnzucemAW\nuPLs\r\n=v7ih\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFq/x+t8LWYwE8XbeLqVtux7R33ySeT7Bsm1bInqs03AiEAuciUQPCxXTuhJReEkH0zjBVcbq5TiA5dY+e7y1bk70k="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.9995ae17.0_1588358741748_0.9912751006485201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-select","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.15d65448e.0","@material/floating-label":"=7.0.0-canary.15d65448e.0","@material/line-ripple":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","@material/mwc-floating-label":"0.15.0-canary.457bf035.0","@material/mwc-icon":"0.15.0-canary.457bf035.0","@material/mwc-line-ripple":"0.15.0-canary.457bf035.0","@material/mwc-menu":"0.15.0-canary.457bf035.0","@material/mwc-notched-outline":"0.15.0-canary.457bf035.0","@material/select":"=7.0.0-canary.15d65448e.0","@material/theme":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0v5NvLh4jLg4ovvmpifKTd6Dk6iSALJg6RTBcMkdkcwderg8Tqf7yxZiRCXOR4UfHgKB9VrG0cDRmUbd1vQJ+Q==","shasum":"2fae8e7920b9d8bcc4d6dd9fe332694a0277b9d3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.457bf035.0.tgz","fileCount":46,"unpackedSize":872303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIvJCRA9TVsSAnZWagAAf8MP/jk5uC9MJ2uz18RW6jXw\n5PlSMvogyQr1IlerQUJFmpCRngN3YNEVehl8IljCjoy23oQoS6A9399jtgbV\nEBebURx84PgfRV8vhDJGab+wpeFvvtVu6I0w1RTxpafCDujOoFzEgp8LNG0X\n7eVlDopQnDkU9jCGlrnEuhxayOHLQ7zEG/t5sR1ipz0x2SBNT+HWOs3j1GYO\nmDNdJBLZRbRwf83nqFTK5rIS6hG0UkK8J5norTBf5+HQlI1iD+NgaaixYGP6\nlgk6rIIh/UDm7uoco16BODieDmVR77lECOSbUu0T4jhGZkWGZ2PaeqPD2onJ\nrjb2xWCY0FxsQKu1LWydxy2V48mjtRJG24VL752nzAsVf5cQaYMnfrC0Q/S+\nY3F2K2rzd4pY9/+NbyC9XtYIfTlVHsLpk3hDO9ejhqcmUB9f5evynlpCQ9OM\nxZv/bFfgLxoeRrR85WVXkMjlFfk5O8kwRTwJYEMorGMedz7H2vG1mvinxXkD\nU4CAmSjzdNcQ1bDa4sH86vluHmRcP9CxC56ZgDEcoBBMHRj0DrfkQVqcbA6i\nsBd9ujDC7PAlp6WciGmTt4QheW5exxmKRuC9m4goaLsWvW6OoADEMu8z7WmV\nKzXjUyQyyy3KvOatcdcOPUfPJ/VKAOvTkTsxWskZ7JVRPdMwFPlZkajDupk/\nGr6x\r\n=9rom\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB/iIabpnKYNGcIsM38hkKkAZtqNY/kYeyQ8/xQ3sbcgIhAO6yRxbzM/JT0POsDVYZQmg9mFLdsfPlr2SL8Ei1jmQk"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.457bf035.0_1588366281106_0.34690786279991115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-select","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.15d65448e.0","@material/floating-label":"=7.0.0-canary.15d65448e.0","@material/line-ripple":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/mwc-floating-label":"0.15.0-canary.2381fd02.0","@material/mwc-icon":"0.15.0-canary.2381fd02.0","@material/mwc-line-ripple":"0.15.0-canary.2381fd02.0","@material/mwc-menu":"0.15.0-canary.2381fd02.0","@material/mwc-notched-outline":"0.15.0-canary.2381fd02.0","@material/select":"=7.0.0-canary.15d65448e.0","@material/theme":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iXdkVLCYUckbOpVLrhKCMo+AB2GjSooDVLRf+ourApLoDZbtSjO6UtCxu8MaqkoCgc0XQbFMh4GlfyuHZ/64pw==","shasum":"e284d0a60d8e98455e52ad93ac90dc35fd5f34d4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.2381fd02.0.tgz","fileCount":46,"unpackedSize":872303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJP0CRA9TVsSAnZWagAA7UMP/0PQgQ3ZX+YHfqr3wWMR\nacwFRrWyJhLnfqUdBIZnv/ITsaolkQXgXsmGJkkw3DwRsrIA1IUmOEvgJlac\n8Di3+93CIofg5MPLLGf08bNy1zTs+/LGGFHoxdkyGYRv/DtML1uO5vqiHwLC\nI14qkE5mNZOL9PpOvkRqyt+jaejeHGWRGvAtAOgTngNgkN/cXnrtw/Adcr51\ns9ypNfT3Jhnc7pIKUP0w7YnvrDrIlf7rbLUjJvK2KimQIBkodQQ7L7pmv8Zn\n+YaA3oJr/vDgISky/fMqtPWIGN5JZACEDHYZRxVDpxJ/Qs9C7SZhTw1kCUPP\ndX/fvyCw7LExYbx+CWHsPQED85oTyr1DywwXPglmnwFj71aVT9G2Apgh5P8O\njG6H+DDiBVuoPV9nTQT/uChIRkHDzQYy1fmpF4GF8voRQ3qtO4dbWHkAgu3m\nwzUhvR2Hvhb9cYjQD8XLWWXQ33VN8eH2ED2AedhGRUXkAxnnMqOioFqH/dnw\n2SZrq7RG0Feb9aG711Qhp6o/OU+LLGKxy6P6x6uZ56U3AxAyeNltf/siquWA\ncu9bKdyzK/0Ytr0hIPKQYhyNHow4Rl1silwdeIycApEFZe3UGXC9Okk7avVH\nx860HSVdEqQf2mMuW5QDLFnwAmsRYFtkRMCTZgd7hcm2hPZtDJPAHQsJ+xwK\ncS11\r\n=HBQf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/Pdpx4BT1/Fji/FL+YurshH59tVbxBzD5zPl8p/6t6AiEA+rxMaOLvoqAjhknqC7LuUI8p+i9gU8kQWMcIeh/cwqE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.2381fd02.0_1588368371808_0.49115464894510374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-select","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.15d65448e.0","@material/floating-label":"=7.0.0-canary.15d65448e.0","@material/line-ripple":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/mwc-floating-label":"0.15.0-canary.b2ca9b57.0","@material/mwc-icon":"0.15.0-canary.b2ca9b57.0","@material/mwc-line-ripple":"0.15.0-canary.b2ca9b57.0","@material/mwc-menu":"0.15.0-canary.b2ca9b57.0","@material/mwc-notched-outline":"0.15.0-canary.b2ca9b57.0","@material/select":"=7.0.0-canary.15d65448e.0","@material/theme":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4uetfAWeWBkP8sMUr8OJujwfDgz1llkk7/W9trAfNNSi+6OuRPWIg02DdD1bRyaZwIBc2LinJMxBccnCgieXNA==","shasum":"781f48fcd03b7c5056192222ca0fea0e6671dd15","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.b2ca9b57.0.tgz","fileCount":46,"unpackedSize":872515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZwCRA9TVsSAnZWagAAWSwQAJwmIiR4l5qelmQUOLXE\no6F0rk00wIxijlcr/qc1sASP/TD2wNb9LtFyQq2rQyMgiTpvZisjrVA7l0zb\nnTjhULw7EL6/thR+vYjNbT/pQWRiuyl3qNW0liX7XGhvOXbGg9vtjHdqkTye\nVnjbQUnhRmB8VONB97hc98iqNgbRJa6hsorPQjALbiuw34DqRsN6cA5LZnCT\no7HXsesxdx4zibBmLfQSk0v2Vs6IS/sGs0hWOtzivdaycQXFOBDe1oc/TKnJ\n26m3rmc7WKhUDPPvy/vTvWnxof5vs1zwC15lqQz14gRfeAyKsGfi41zRshQl\no7hX/K51CnxdTbvIyvgUqFJiNbcHTpXTsTe9E7BiZ2e97EOyQ4FLfshUEOww\nwXVpAEhFTN6mZcb7/oJQLkBXyPGKPev4qykpZcQl9uVzdcKEeSIqeQG6eHVH\nN7hzY9PVYAV67l2T9VnFpusrYlufWzMBPhsxs48N0wE6c0WkFlwYj61HnGR+\nin4tFNmT5rfWm6mKJUAnM9ut5t73hUvjI+mjkofwxIKaqarxxI/J0lmbGs1Z\nTut6jCvQXc/dImGlXJN6OyaQOfDoJc9QcaDP2st/h9h7LG55lQgKgksC6p7F\nxOJh5Tj7iOtbPpaq4EnVdSz2/aWxlfDyF1nJ0yHz9byzRZlvUdJCllyIjLQ5\n8N+8\r\n=x2Mz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAuvHfBdtx1WKYXrDZGYl6SMA3SdteBneGlhEYdZay6AiAU9pawo/aiXXM/+Bm7asOQKM7LaADc8t8len3x3JHYlw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.b2ca9b57.0_1588369008277_0.47677653267618525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-select","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.15d65448e.0","@material/floating-label":"=7.0.0-canary.15d65448e.0","@material/line-ripple":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/mwc-floating-label":"0.15.0-canary.b2b088e7.0","@material/mwc-icon":"0.15.0-canary.b2b088e7.0","@material/mwc-line-ripple":"0.15.0-canary.b2b088e7.0","@material/mwc-menu":"0.15.0-canary.b2b088e7.0","@material/mwc-notched-outline":"0.15.0-canary.b2b088e7.0","@material/select":"=7.0.0-canary.15d65448e.0","@material/theme":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IqJjx5oXmVbG0BgDcDHAaQQuFJUrLsDe1hWrOJ2X+NBAdlVbF9gC0UbbNytLXWuKMf8+5zE3o4hNH1Z76iZ62g==","shasum":"528ad71eace2bfc3ecdf47601a0024add7d45e12","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.b2b088e7.0.tgz","fileCount":46,"unpackedSize":871793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPiCRA9TVsSAnZWagAArUMQAI9uWUUG6L0d+fCWywk3\nLvdt7JsvPA/PldgN3C8CKDT6ZVCvGn1/nWkn1qRD2TockiHH/bRuroqXNt8D\n4N7ir/0pzMRAy0V8rK427/9+WE3j6Wtcz/F30xtCbeaxvx9Y6ZYpmcUqtNrn\nkyL/EbdHk4hRMVLy9dItn7sk8M+i6Kx3PCd451vDHHqlElbyqZcc9N3KTmej\ncP4JtN6+BgExpTe8Lm7xrQhNdI+T+/4lCOVfwGXTp/l3nIA0rsa1RYbaYN99\njS4395SNjRkViQ+/ZfxYL2rxrm+1JMer2p1sI3zieh8var2voLBpq5Pd3BC8\n3ssMVFczyXTSVrFJwwLLlaad/fvKT3UdAqv5pNWTqg7w42J/ShHWT2LTezU3\nuSMR62a0f0eyU7N0Dp6gtjWFvfVoHpcDMCFHNuoLcfKn6wqfOu7HkYr72l1Q\nO9jT1sXyejpMTPKrKu2hSD5Rs2nk+Z3QcnhxR4UDDR/iGv8mM8z4P5DGWnoR\nt8cBTYu02RulxnczbJ17rMS4I/erwDSrfYGKjayWorF50TsFaS5RJnyBn9jH\nHqUlNGQKKbvBfUZ7hl++a3CTPOsHsKPtF7Xy19WM1xKqnqj5YKbIe/z18X/U\nFFeHqKMZL4EfS/4zoED8CPvgSBlsQrYYu6Jb9TnibF8k5ElZ65wDMmKlMrwI\nSaKb\r\n=U6XW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFg8fTC7LdKD5c38SLmxC8Cm4pqKdpQQRp91wRCUUe8uAiEAwE+zCrxJyv8dJnK8NhVQIuKc0b0ABnCcyotvMcGcMZY="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.b2b088e7.0_1588372450298_0.3669299513413744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-select","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.142b1549e.0","@material/floating-label":"=7.0.0-canary.142b1549e.0","@material/line-ripple":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/mwc-floating-label":"0.15.0-canary.fdd8f69e.0","@material/mwc-icon":"0.15.0-canary.fdd8f69e.0","@material/mwc-line-ripple":"0.15.0-canary.fdd8f69e.0","@material/mwc-menu":"0.15.0-canary.fdd8f69e.0","@material/mwc-notched-outline":"0.15.0-canary.fdd8f69e.0","@material/select":"=7.0.0-canary.142b1549e.0","@material/theme":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qHGi2uV0tQwUWqNPI9ICv7wSMl+F8+PfTYT3CROwZ6C5pu1GvUzElUJT8lGB3M1LJA6J/eBSb9leEvHOI3qXzw==","shasum":"41f60c08ffed0765f2b4b4cbe048594f20781e91","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.fdd8f69e.0.tgz","fileCount":46,"unpackedSize":871853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLv/CRA9TVsSAnZWagAAB6wP+wfqk5fcWWzYSB5vV7l/\nldar96m/vM+HHpIVxUoQu0VdYE1fUE8YKV3DWUAZcGMsimEYZ1XHo30xSyu8\n5QMQBV4MgoId0d8csL9vRWAY6hwnwhNngAazhmfw5ve5haHwjGps1K3XejWA\nM6nDojywjQ4+J64FZ+HngKdiuS7X93HeF3IzxWZM58AETnXRqu8OMZKtvUhx\nGcYxLOTI+OMVNUEKX2mVbTFO1xSouCXoiYED7/DF2ITqLC/VZw2jMQ9DIH1y\nJpUqbw03S9Nq0FFzaTorU3vL31SC3TiCRoEr4MP+3MLftRQSD0X0VsiAI755\neKaiOUo25DoHIqDjfw0tu5SnNspIACa3/tDur8aqkgKfrTVCQ7MGN6Ro9Koj\nQ0xovRHZdqwqcfky8gHK6tLjhLIUMCYIUyxWkR5WDa13ISQyDSKxgsbWsJEM\nEbwkZuKREcERlLejh8TkQmBQxhvrymz3ivFp5bUwSC1CgjFmWrcb8W4VKTpt\nETHGj8p+FvsSjmG+nwyX4vm5Q1uG9TRViu82xncao0luNfA2IWq2RdUX6mq3\n2xjW9KEWwk24QHwgzbcMlg97AHQM/dL8zRdhp8LweBVo2uX0DrIgce2M5ux6\n+54Qj03OKoUgnSDcE/3zddaXtctagu2gfbPVcVkx5UcSdcdYisELzmG2c2T5\n11CT\r\n=VpFr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTsqcFLS9pfZd5X6946ebcC0/xj5crPPCKcXXIR2Va2gIgQd1BHCeSALMYEgypv4p0Tb8ix4JhsCQ1ga38rBe7PFI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.fdd8f69e.0_1588378622660_0.9898729309322971"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-select","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.142b1549e.0","@material/floating-label":"=7.0.0-canary.142b1549e.0","@material/line-ripple":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/mwc-floating-label":"0.15.0-canary.730f45a8.0","@material/mwc-icon":"0.15.0-canary.730f45a8.0","@material/mwc-line-ripple":"0.15.0-canary.730f45a8.0","@material/mwc-menu":"0.15.0-canary.730f45a8.0","@material/mwc-notched-outline":"0.15.0-canary.730f45a8.0","@material/select":"=7.0.0-canary.142b1549e.0","@material/theme":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4eAv4/3hOtE3IEOdvBt+8B5I2i3GWvL3C9bR62mdtY5fNie0RFSRKxBYvU+r8gS8JLjJwpNT9T3wH42r6i5wwA==","shasum":"db0a40491d20b36e9e68516a054359564f8a6956","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.730f45a8.0.tgz","fileCount":46,"unpackedSize":871853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1lCRA9TVsSAnZWagAAupoQAIQQaPBnAam1oR0Ojter\n42m0BqoSJQXc+b8myGFnvNjgJdy6LJY4IwSIrlnKhaIU4mGDRkbZadLDODed\nTPsqK36BAwlEaqzkNUy6zu55avuhRcA2AG7MpmRbTaE3EnzUkHoCqmyU85fh\nOP5TGTFSbw8bb6FsNz5Cej5oNORuemkNAIeWyw2dR64zpuszDlH0b0sEzusX\neWgbhhYG5b/jyZjWfRyTAtZyjK3Ks6+Z5prv42l2VsI3AliUDkKTgPe/TtVi\nRyW7hwuefQAO+0IAUP+SklB/2VdpO/h0DW3ZP9K8Cq+9Lyd7Y5DdAOSTlGiZ\nXKyb0DFCFkdF49HcLIZ/6rA6qgvAx8zbR260Kr+R3LmXqB4L44nSXb/UxgbY\nBA0vED8d52T9cbMHtyWiYLIgnt9qZrykXXdqSVU9wOQm/ljMM1x3vs+Ywrp8\nJJpPguV212AYSHVe5k3qNRY/oW+wU2Je16VF5wVw0wHB487ZT84juocNa2rk\nMvKacf6gh9tZ5ElKyvoeo7QvK5n8PSi1GuM1t3YTRn9XlOoFnEKM0alRjqKa\nU7NfNKMUiE1EDJ8ydZu9Avb5JoI7Oxcy3oMbJoME+wq2vHo+iIA2fFQJqNQs\niD1E50EUEuHQBowoIRtyKnL1u93wGE4lZ92+TmTuyoFYQSoCp6Fp3QGZ8Ekj\nEJ1q\r\n=TsBZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/cEOgj+3N1ovMv6bpd2m9JI7JSnBhwKIjgm9e5hZr9QIhANdOA7M5QamEvkEpx1O2gm4pi5K6gEW9UILSkz3c3zIG"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.730f45a8.0_1588538725442_0.76835438699256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-select","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.142b1549e.0","@material/floating-label":"=7.0.0-canary.142b1549e.0","@material/line-ripple":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/mwc-floating-label":"0.15.0-canary.4219bd20.0","@material/mwc-icon":"0.15.0-canary.4219bd20.0","@material/mwc-line-ripple":"0.15.0-canary.4219bd20.0","@material/mwc-menu":"0.15.0-canary.4219bd20.0","@material/mwc-notched-outline":"0.15.0-canary.4219bd20.0","@material/select":"=7.0.0-canary.142b1549e.0","@material/theme":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xrxMi0GWxS2BcB0DcUrVTkXHc7IplkLnNXrsVUv34qJs4DYoR6dkFxOJhMYV507ZA/8j5SmkomVCE+5WAfDuCQ==","shasum":"9e56c47bc5ea0cfaf2aa32f62d6491833235bae6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.4219bd20.0.tgz","fileCount":46,"unpackedSize":872775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKYmCRA9TVsSAnZWagAAQysP/ivbodH0ZoOkaioNs+1s\nHZA2FIADljGflHhIl/mxfkr81lmVLG4t6ywrc13NyjmSEE5SEdYy7h59G5mu\ndtBfzLBwORGwSMToF7/aGoRJD4BcxvxNeZlwmu8xdAEonhphpq7DO0Jm1LBQ\neW2csNXzxVrpjwq77Q1mBuhEoPlllM1jnS7RTnlFiQ2NLesA4Uu1Nikvszxh\nhcP0WsXcUj3tkUuONPgiE09LhBdoCr44hBihp2b7x90PsoGHwpDLAxIqqWCn\nrPQ1COmUs8mOBbBdF1GMeba9jbvNcn9c4kgjrY+CaRFWiFG8BCLrahoVTDnw\nB5RpxQtF7BR0WqNS8tRcFUxaxK4pVZgiL8U3t81wwPAkJMsMSsmhtG7901hg\nvoYbWknku+CWJQ7tDGBqMAvCCosL/JMBAZvUYModQshQlBOU0Bb1MUpWqRJa\npB5CLt2kw5ozBimcEXubLFaQT8vRmWiYdrKtSzyvozavj+1zAbQdjFFR2FMw\ncynNBaaU13jPX/alcflTdXUlww5sYiZ0uRuLKxVeTUVA3/zgpv+EDGWPM+6d\n1TlyH4Q2QUBghk2EC3H7EemGKIELSV431ASzTh0bOxBU8KyfdZxd1qyoAjRA\nQxAO9PnkIC0L5FCbK/aq7tW8+WUK2FfUjLXJptpZRbBPBTaVjCyzMIx0nFW7\nPS2u\r\n=SgWV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjPc5Xt85VjVG0ta7sUHGvOHxynjmKNWPLsX5taHJ3ggIgS2h6xyOpMCPpdDq5ZjduTacVq6dKC1jqhCQXCD3DXkI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.4219bd20.0_1588635174300_0.18331373000810935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-select","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.03dec929e.0","@material/floating-label":"=7.0.0-canary.03dec929e.0","@material/line-ripple":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/mwc-floating-label":"0.15.0-canary.1d83cf6d.0","@material/mwc-icon":"0.15.0-canary.1d83cf6d.0","@material/mwc-line-ripple":"0.15.0-canary.1d83cf6d.0","@material/mwc-menu":"0.15.0-canary.1d83cf6d.0","@material/mwc-notched-outline":"0.15.0-canary.1d83cf6d.0","@material/select":"=7.0.0-canary.03dec929e.0","@material/theme":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iqaMrRu9xi+r8eMEIdDTGOxvrn15/5prkekfd/eKgAM7cW0g/7dVqKXPQcJlm4ADaAPWyh06UMmq/s6abn34OA==","shasum":"a3f8060b04556d4d3534e26f75e5cf64e8178c61","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.1d83cf6d.0.tgz","fileCount":46,"unpackedSize":873368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ6HCRA9TVsSAnZWagAAMN8P/ROvfzo3dyiczH4I4hJ6\nSBeR3YuALwRwPVdOyS02Yx902CykQdkavBYQb9PnpLlI95iKG0BSlthP28Cf\nwVD3iLAa2eaKnaLZGMvBVukESe+ZHnI8wOEWR1zbjnrBuVd5BEiUT1BliuS0\nUvB6o4SBv11VMA6CQOu9BgKPqVxhUCNnGZxejOL0sNw4i04fYZHDBKkT8Nk3\nrgLPSeG6uSyoBPumauBW4UedOl+R1J+6luliZ1bVpCJyCOqUXZyC+6RHxKfZ\nZTMQvw2mErp4huUppz7FyprT1iqynSkx0Ty02Tmr3aBeToqGua+g77DrCdOI\nY7iisbLPzz4/cE3Hvhki/hmBdouSFgFGEK+mLzD5SHugGBgKYISeRHCtUBWC\nvMQwycPZa7fXIPV5YsprS+ozlm2fQL/Mn6f35bfljQmpVkwJM7tWIWSlmzYf\nMuEd3S021IL+ZsxKrNlTCrsv0jc+2TUg602xjAMykq02MYJyEjTcRrFzHGK3\nQAs86wLMbRwpoaibi55HT6a2nio5963vHHrt9vsKKVTlKTJmgsz7MB98FBRT\nYWDzdSxD226eEBbGFRvan5Ehs4WMtcE6dLt6IiRIAKn9Y578gIwOUNjaRXZl\ngP8p8tBC0h9vEyPs56Mu8gEKiXM41cHXrJ0ZuheekA/9ktnvgj7emADSZtyE\nozCO\r\n=Zogq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq1C14Ayshf/zf1uZUgV4lvu3/CDDzKd0PoAfhkjnS2gIhAJwUMovh7cQKcW0VsZwLtjwIZAJdGyA83dWPARJyTe6Z"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.1d83cf6d.0_1588698758482_0.7033704165649002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-select","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d92d8c93e.0","@material/floating-label":"=7.0.0-canary.d92d8c93e.0","@material/line-ripple":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/mwc-floating-label":"0.15.0-canary.3bfc63aa.0","@material/mwc-icon":"0.15.0-canary.3bfc63aa.0","@material/mwc-line-ripple":"0.15.0-canary.3bfc63aa.0","@material/mwc-menu":"0.15.0-canary.3bfc63aa.0","@material/mwc-notched-outline":"0.15.0-canary.3bfc63aa.0","@material/select":"=7.0.0-canary.d92d8c93e.0","@material/theme":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NvSg34tMNZlwazkL5H65Hi8+p8L9nOuEjaFWDPl2Pz6zQt2jsuMUeP+PG68qxI87ZiIlVmNmBkSBeuPPHzR4XQ==","shasum":"ad8c670420318a1181bcb2231c4f043787729456","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0-canary.3bfc63aa.0.tgz","fileCount":46,"unpackedSize":873368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesaz7CRA9TVsSAnZWagAA5dIP/0x8wLyFI+1xN6p4xqRD\nYEKh1ipgtHHexxiILqSjVqTGV/+yYUcFKwYeVCzOfNBiNLYV2w4VallngbNv\njZKauzRKqlTd7V23fINYMzJr8pPacHjikSVj5HjqCyAueWWbF4yBx5sn8/5T\nO2UubIimLGKhxhHuJ4xWx/4JAbuNvgkysiTcZMXDSsgIIh2n950RGqo31dVU\nIvXck289enLsY7Bk/ucS6N768gQ7/ASkh3maoOm3R4lptJ7BduDd756jmxU5\n6a08uZSMqR6ZShMjRFbxyEbavF+gbkxbUsVjVGQyL0hGBYqmkNj+FINeWlQb\n5rnmIcqMDyKgVWjnfzw1BzIBdZLl2JmBjJg2AL37rMcrohLifQ/a24y3LLOS\nsY1IzwY2CxZNTZEFhi0cwJoMEacO5m1HpqehKvZUWB3+YLXAuWgcRd7e1Qrz\nKaH5HRNv+f/an0UsQLGEaoxVGFqSo4RUTBIPB3TWY5zfykChCASU0K10YoTA\n1d73pJ0NCCghSeoinJYrRtvYE7R5zodk6uaYtfGzOfC6WF5hJ7rw+tGcsKJC\nrzL8HsfzcZqs2vjCbOA3xgl67ypxzfn0QqQTPzytf0DED6LEF/Obc4Y4l856\ni9YTwn4aEqir2cromctdsyQwp33KND2B8hiLTSNyS9fPjBuKutAdwAx75rJW\nC3EY\r\n=fO3a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh9F7bXIN2aUY3Axk7hhYNTbpDkb2PVDa8SmH5p/lIqQIgXBRZhS/v88OApqc/WnBcZsOq5qmMkkOWDFOKLpZYevU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0-canary.3bfc63aa.0_1588702458935_0.0019934179493361626"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-select","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d92d8c93e.0","@material/floating-label":"=7.0.0-canary.d92d8c93e.0","@material/line-ripple":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","@material/mwc-floating-label":"^0.15.0","@material/mwc-icon":"^0.15.0","@material/mwc-line-ripple":"^0.15.0","@material/mwc-menu":"^0.15.0","@material/mwc-notched-outline":"^0.15.0","@material/select":"=7.0.0-canary.d92d8c93e.0","@material/theme":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","_id":"@material/mwc-select@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-leaGiXNWrUMpS4HO+YyjPuJfUKos2LRLT49WdueErt0MTx1nYhvWGxj80rOugi8q3/6zvs2wxZG3oWX/KruO8Q==","shasum":"7cf413f6a22cd55cfe866eb8c3e294a383ea0393","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.15.0.tgz","fileCount":46,"unpackedSize":873248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesep1CRA9TVsSAnZWagAAaqAP/jUwPDYVtnaSZl+teBYp\nsdvQyiudUmCIGHjJy1QzJWMM5RVbZnnQSoGB0mcuzILOzJK2/kV9ONkJt6KY\nWSpbttiGJ6/a23gH1R6QlVrj2IjkNHH4T1k2bbvTW4z+uVyUaIjl5vrf0Oa/\n2AtvgJG66EWvkUXR9IfnPl4/JaccMTrcIeuttA5swvo89/UstBdlKd4fYQoc\nXEjZSMTp1t81blDTdmEtA8dlGXEE7yL+TsB2yJ17oVmOV6Fj0ln0ZwKDPjzH\nbhdcou5c0rntLbP2Sp7NdBfVZMi2IHJ8NRe4T4qDtYdEaCZdc9WVkjDe15Ql\nhG+SnJmblGkO7z5WCqdJPEKYYH67Z92ybssA34Gagqz1VMbJ/pjj3y9xWM6P\nbRJRtbCWmMoDZL14LEpIUXIBRhuIFUnpcCY1HA1T5+oq7U9tXa7ihDncUNMO\nifkx76+ZunKXv8drH6kyV1hwuq1SWYD60JmuOr4nAs4rb4kR6vo3/ax4+tJx\n0GywEdoFLwWOljFh314rO2H5mcZdxLWNrOmOs/FXkC+GCEbBgL4y/eCuP9WM\nT6FmXw3+040O//JSFjBl2RSPaxrWn+NttdOsKxtaHZGPm6+tQ0Pw58AS1h7R\njox162M0tL2UXXcT9l+XiDloIbZyt4uAQY7m/QHHvz7NZN2lbRnkqwnrILJ5\nS0Uo\r\n=HHPD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDx2SDb4sdFa5JFMe5RL406brMfSvLGBXGkOuSoXHKfjwIgC9qxti4i3s0t/2CR/HIoQTeYlCcKU8FRvbsVsBGs0lQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.15.0_1588718196541_0.2984038761796495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-select","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8135cc085.0","@material/floating-label":"=7.0.0-canary.8135cc085.0","@material/line-ripple":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/mwc-floating-label":"0.16.0-canary.1f4e3d1c.0","@material/mwc-icon":"0.16.0-canary.1f4e3d1c.0","@material/mwc-line-ripple":"0.16.0-canary.1f4e3d1c.0","@material/mwc-menu":"0.16.0-canary.1f4e3d1c.0","@material/mwc-notched-outline":"0.16.0-canary.1f4e3d1c.0","@material/select":"=7.0.0-canary.8135cc085.0","@material/theme":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-y2iGC/pzfTCVXie9c5PTF2V4mSlkqON76yh3t854uNobOFMBygiAV7gfik7vhTgXAS/CGdTEc36thM+2v4fC5Q==","shasum":"af8ac1c253ce1eb3785d9c190915d678816ee492","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":46,"unpackedSize":873602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszSLCRA9TVsSAnZWagAAuYwQAJWiB1r10PPJyM0LHVc6\njS17/r9l1uYZkfG+Y7oG/hHbNO2VXXiP9zF+hBEs+auBQrnXMRezCiDHKXLd\nsXhL/j5L7sm6ZB0Dtf3nrNvBzyfKEvl3Nmz1ohLZmngtYN4pZwUwVlEBylkE\nqHOqpGexAIKDm5KynleAFW2tYy2BGihqTVKhO7qsdlthhKc5wbtH39Dr7awK\nmytI3vFuFSWfiX3uq431KEf3ey/zgjuIbiixYpUBmqsxsojv1eZfQwOXv4XI\n5c1gCq9h2KtJZvld14b2oS2L10cMVqwxP58NGsZoL49tmRZyScSEFtHfDmzC\n4VN2dY9wNeDjbgzEfZed7gB2E5mPGz1iNb0lmYF3kbJ00I7eta2+SvKPkbe0\nvjmutiYIUTA1zwIj7k5NW79EJQcZbpcNw8rAd48oGfI6PHb+uj0ck1SbdPCJ\n/z1ibdmW1EtYOlvOBFMDUaaFVSanNv8L6CU6dK1IyAtSWF3zNyityboTcj5o\n5oUGY9GKthg9jVFYUt4VSHEnnsCyfcAtq+vFG0jaisY2/xzcUA86pZEzM1YJ\nYhMhxOxDBr4QG4kY83aLV5r32UxbIV2Ut4MBbYsz1M1fJvd76y74NqKz/M7l\nQsFd01rYaGERYOVUBn31LNuR1klAtw1UP5080S5j8CxjQZ7wmsDYEUmi+n+U\n82bl\r\n=l3Y/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/273wdfvaDBT7Izd0ieomPGwBobTShh3WTv+JQWBHYAiEAjokwtszRxA5G+JAvNpKFbb3EsmQC6fIkgOn648G69Zg="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.1f4e3d1c.0_1588802698845_0.6682467349862229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-select","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f83e00898.0","@material/floating-label":"=7.0.0-canary.f83e00898.0","@material/line-ripple":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/mwc-floating-label":"0.16.0-canary.bc8759d5.0","@material/mwc-icon":"0.16.0-canary.bc8759d5.0","@material/mwc-line-ripple":"0.16.0-canary.bc8759d5.0","@material/mwc-menu":"0.16.0-canary.bc8759d5.0","@material/mwc-notched-outline":"0.16.0-canary.bc8759d5.0","@material/select":"=7.0.0-canary.f83e00898.0","@material/theme":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-v0LHGWxZyRAEEfCnGZLqFw4RfGIC4ITkR/L3dXG7Q3hWU5Let8jRZ39xX3gQYvAaqjhRTzt6nl8TIoILf1L71Q==","shasum":"72aa828b5bca171ce555edb33e1cf9c9b5fc9bb0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.bc8759d5.0.tgz","fileCount":46,"unpackedSize":893152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJaCCRA9TVsSAnZWagAA3N4P/j/ovIyL8f6PFmT8Ww+E\nUftvGXJIlqEb4i8WOJi5qNnKiqKTwj4k33plPqTEW7K/kTmvdE/FJzbEC1WY\ntM1IL2spwWLySYbTBT1SQwIO9BKiCCvE1KbcUIzhcG+Oxsj0nu/PW3//IonB\nzOTbjZlkb2MASs0YT1eWMlyu9/lZQrTiJWX7VH89yJVwk0YWC5dn6qt08rKD\n1LY6UEP7DBzcfb0zUAM7tcDJ4HATAzU6ywWMr0JypA/C4DMF1bChmIAt6ZPo\n8xE+pt7Br/h6cWFkMLuxUwG/dVwIlg2AlJR9EDfnJXyBh6Q9UzuESFaxkDSI\nUTAW5L+E8VxZQZhGeuaaljq6CpZ6g85fD7Lw7W5f3jLcfKEHzgiVsNb+0zPX\nFoGyicFF/XTYTXWHrq8XVReCxg6iJk3o9WsUlgfOCYVoGw32qa3OZ1j+0Ofq\nsz5mdReZmj7LbspLYIWMChaYuoo+W36mo3LYhVj3xBTTopCGp2uf7FgAQBfH\nOO63cSPK7WY2fdPc0ccZF2FLXEt0ghcWtWS6t45rXVA7e5XuT+xH71DSIWNo\nY7Sr8FtXDECo7KQIT2Lt07T32LK9rXzKCM/OwmKtLQ/f/XJ3JTnGGZjjLsUo\njNIFJlpX4zf/Q5wB5FB2fTetxKT9pwKonJWkRwGw7MUpxr8tdZ6Bzp73qGva\notCl\r\n=fauN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZW8loNh9P6r1kYtV0tSHUmrGu7HESLzLu22elqrR8wAIgecUyVq10OmVpvIHuFF6noYcgUQmvMr2hnAW1KoLkYOs="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.bc8759d5.0_1588893314380_0.05074954882552918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-select","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f83e00898.0","@material/floating-label":"=7.0.0-canary.f83e00898.0","@material/line-ripple":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/mwc-floating-label":"0.16.0-canary.d1379acf.0","@material/mwc-icon":"0.16.0-canary.d1379acf.0","@material/mwc-line-ripple":"0.16.0-canary.d1379acf.0","@material/mwc-menu":"0.16.0-canary.d1379acf.0","@material/mwc-notched-outline":"0.16.0-canary.d1379acf.0","@material/select":"=7.0.0-canary.f83e00898.0","@material/theme":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/zUhFZdmrktXVAoGq4nlzV+gLzBaW42BkxxTxbIRP3K7JyvjykVTy+CgUwkH+XhVzsbPhX7NQhhJJKuW7LTf4A==","shasum":"9d20fb8436656e14fdc7c628548e7f68101207a5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.d1379acf.0.tgz","fileCount":46,"unpackedSize":893514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZnaCRA9TVsSAnZWagAANzsP/iYXLGOOGpoNmM4CYML/\n9nT/v9uPeDrDWfENV6dXBTwwacKrHyxKTvT2DQN5FYHUBf9H2xGuFVQuu2/H\nm1CYyInJntYEu3Dj1+PVe7d5E5PanGmkuwsCjPsbc950JtNKTUrby8gG5+bz\nlEAtZEauhRmobMlT0gGw0nU28w5wAEpb3bhrXb+ZPbIjKWrq0xPoRfeKirgl\n8RmFGXZac8V2fdqZhnn4ofiZOKg+XkYBg3pqSUGoFJqXntBtR1lDPkRTmMqt\nWTojQQQKXpTZfkAkKn9UaV/OLpG9PuWMqyleDMV5+Achn+jI4IUACZ5cW/2U\nsn8xe8vS0kfHdl6mGByLcmjUQ4/JhHDhdMj3X42h0y9j+gAYyG0IPuD8CzW+\nGwgi5upv8/4hkwZOdBKCYNm3N+nwx883lYhFY9A1a4+C+FWmW2Yqf6u/Yfg/\nbUsKaqfCJT3GgD52kHhOkQIkctxO782gGNyeacFn88AokZygfXsrf4BabPgV\nmmAhqm+rTyONSVCrtEnD9p6ZnLjH4Lx5mVCBII5ZoldrewbdUU0QoBTIt0Ks\nXZye8uie9+mRgOEO8atfkUXzOGc/8QQBvL0Ri9cQG0y8G6XZ302i8Y1O808y\nCpub545NJQRUYzZcN9iOTf/5cc8ztBy/vOeeuA5/jGBxikfP5m6ddzGv8l0x\nee8i\r\n=pY94\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE16nIvyju4c5bQ0FjKVdgBs131oUoP/F1YAK+pHAGCmAiBzb6czXlwEAV7GJjNRJkA950kJNIA1qFVHWQTw538mNQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.d1379acf.0_1588959706301_0.04941866617659829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-select","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.047e6b337.0","@material/floating-label":"=7.0.0-canary.047e6b337.0","@material/line-ripple":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/mwc-floating-label":"0.16.0-canary.58d51fc0.0","@material/mwc-icon":"0.16.0-canary.58d51fc0.0","@material/mwc-line-ripple":"0.16.0-canary.58d51fc0.0","@material/mwc-menu":"0.16.0-canary.58d51fc0.0","@material/mwc-notched-outline":"0.16.0-canary.58d51fc0.0","@material/select":"=7.0.0-canary.047e6b337.0","@material/theme":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FXbdEqRmY1QhSth3FRvCq0bDPXaojIptF5rWi+FHN1amype3WkgGbUbDM2OkU/PzWNsfn4aCPGnq1P8OK9U8vw==","shasum":"9fdd90e74f0e5f490dc8f2edc987ce29202a8796","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.58d51fc0.0.tgz","fileCount":46,"unpackedSize":894134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBuCRA9TVsSAnZWagAAgVwQAJVxS6oZcqpQUZhHADsb\nfjUyPD2Rwr+6J1L8xi8wb1gjvb4wCy3GHJg2nizfRSoYh3y+iMamEPDXu16w\n6JnR8xEv6N8vD2Q/LZgKhJQagVOt6uD+a36tpjf4dRQHHmrLpAU3Vs+vDXsn\niE4H2RLV7PgdzBQOGTiwyjGLGsYxskOlY5xVutUslI/kULwWrrpGLJ/fHXvt\ngFCOXXrTAB1CSbhG0mUCxMyDay+QsrMF09w339DuTCTl2KqgEMgOTJ1jTUd5\nfXcEUtnW4yc6w4I8fSHu+hbl3up+RBkDz08pKGlv8KjXaW9O2n8DxPb0t9mS\neq6tXNqDrotgCFcK7dtlD2krJKU4SdKlU/EqnZv+NPTt7iVViFP5RlAHOl4J\nQVZbsnK7jO7jL0Is5JvkIi5emTXbhRhfS74XGFz478YF1FaOHwNp54EfA3Xz\n5r/FzmcaeumjqFPxGgh9gH7WeR+nWDhS4r2FDMfV1v+OK480dBttS8NCaWNS\n5lbjDMNJFBeAIy6vuU7pxdcDkXpyUS98uoXec6Pz5nzbFBNhJ8tM6cqp7YpW\nbXoCBejd04YLcEQNS/+YO7rBe18+Gmde9XQasqPcDZfxlqh3kNE6f6jyQ8Oy\n9QpZJsvznk5gqGWuGox3SB/HBnzyUghrFbMeLfuswtl/8uK7WSR/H/+rbp2n\n94e0\r\n=cQe4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDmd/4mJdwRMeJx8ft50Lpwt+xyRM564dljfTBx71XYLAiBsl3KsDLJKzETRbew1MuE43mgPfsSqbqXgEHwVCmUX9A=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.58d51fc0.0_1588965485962_0.9310991848335795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-select","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.119e21426.0","@material/floating-label":"=7.0.0-canary.119e21426.0","@material/line-ripple":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","@material/mwc-floating-label":"0.16.0-canary.588062d7.0","@material/mwc-icon":"0.16.0-canary.588062d7.0","@material/mwc-line-ripple":"0.16.0-canary.588062d7.0","@material/mwc-menu":"0.16.0-canary.588062d7.0","@material/mwc-notched-outline":"0.16.0-canary.588062d7.0","@material/select":"=7.0.0-canary.119e21426.0","@material/theme":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CYofojGSoxr74fGrVfpgzgSqSm1dkQI1VIGcYONgRIOtoSces90Ax7Iyx7lk9QvUj2CRBhQuWg4zlp57m9K0Bg==","shasum":"275d13b902dc7ef6921308b5e54e75b8365115d9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.588062d7.0.tgz","fileCount":46,"unpackedSize":894134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc4FCRA9TVsSAnZWagAA0EQP/3L/xzPQ9XnMlWL3UTXv\nGDvXIj4C592cIE6WmBD4xv2QPKBZQctsX0X/EiRzBDTRiempI8DRRA73s7SA\nKwujA3MXkIqWhValxgVt3zg+nHmQRYqLxacrDepig+9QhuRi7UEBaz+4Ldvn\nUBpAiZmajGvJEgATmDSx4MrBgW818MSs00ERIyZuLBgk0On7JYFm5gB+Zpo9\n0b5YamKhYBdhopcAV9X6fB1emOtQQTXV/v4C0dWbaUYElHnLfbAE3bbzoiTP\nebTYFOQK/zhO7ALrEe8VS9eKo9jIvaetI2OHn8bgIXQJ4mTsMkcQ3kT+mSI/\nxGi1n4cl5PrueV8Ie7ZAmuhmDxGVs2soBwe6KeHdFw4THUmo8uxqJvlRu1xX\nAS1JGz6t7DcrvIKXt809JxHNDVsMWPrCb2aobfNAsVq0FpQVcX6ErWY5ddbP\nVhLAowNY7xLo1pAL8WCmmn9UarbK/jAhOvagJdKr9+k/K6VV0bYoJZS0FSjZ\nANv6GQYnzxI0Z/uVqsG0WtXr5Wjqe3hb52uWS2K+PFcA8rTMjYVZjPsn3OZ+\nyq7eVl7VaR10JEPVomfU/tAAbnAsXHjYVVKSu2qRoxVWUPvSsRUfQxpBCFr3\n1b+lt5KbeW8PP28zuRbr6EyW8fxj3Fp903ypZrVLSAWPTnRmS20KM8IZtcaO\nsKln\r\n=b9ZQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuXhvRQE/z3AHDYcRwNfgP6b3UsePBUxI1lFcPcpHXYAiB/cURL00gVkHNdyLUQkN6LPRoMM6bSrh0toenugUKbrA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.588062d7.0_1588973060992_0.8310856242443139"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-select","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a5aeb3001.0","@material/floating-label":"=7.0.0-canary.a5aeb3001.0","@material/line-ripple":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/mwc-floating-label":"0.16.0-canary.fa21f639.0","@material/mwc-icon":"0.16.0-canary.fa21f639.0","@material/mwc-line-ripple":"0.16.0-canary.fa21f639.0","@material/mwc-menu":"0.16.0-canary.fa21f639.0","@material/mwc-notched-outline":"0.16.0-canary.fa21f639.0","@material/select":"=7.0.0-canary.a5aeb3001.0","@material/theme":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dykkFdZjdRk/ST2GbEfN0IgFnmtBVjenQLlDRrnfqXOTW/AAltsQJThuPGPCFp29vvHkC/s/rw649RYGdDtp0g==","shasum":"d5d0926c0a232a420dcd1b34e547f3fe7fb3980d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.fa21f639.0.tgz","fileCount":46,"unpackedSize":893981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYu9CRA9TVsSAnZWagAAfDUP/i6b8aJd6dQKCmiUSYd5\nBjEDixAK1IPcKkZR9Ybjwbqj0ItLJ1F3azl0w7UNgT/h3FDDFfDntRnUPsWd\nVRiliuBchSaTSlj+hdd+4nKT0ho1Fr5yKeYbd29hnSJyOB1vYJaV3kmZNd5o\nF5au6ujO99qQ6NriPepixx+ip+90ythArJLIXPIYz6rwn9KMLlHZLee0rkr9\nnTaUDYcs95azz91iClSz3RCaHX9ulaNUe3lOespSugGR594l66TjOVbiGSNc\nG3f/BFyKwjqWMSjpjypbPxVX9VB1MDyIAwtmvn2y4LZmfnyzJ/F7eRNLi3FL\nsAVwxSeK/pvxWMBVEdPjbqruyJEO1o9M4BzlpMVjDzUqEv2BG0ve4vz2pK6l\noD94kD8ayAtwksM62aOfP8iwwIOwaCxmvZoKcz3Sv3wJo8Yvth3AsymbS42B\nKJCJl0XwaYXuvpV7EwY2Sy95mWTDa22b9irJQBAu4F6i0AKH21WL1yObeATc\nsoEhTV73dfzXDI4lpRFfBrJSbhVRzlBnm2QI1/5T7MZNPPZiUarnYJwnzZCP\npEkcZ/Lx08dTSstGK47Dile3uxtMPRjLVbU7d8K1+PlrZLm2tEJzfRSErkc1\n5YBfQkOfAlDJGkVFCrdbcEfCEdWTL+TTx9nKcfrSzpYXgOmTwX+YgXTtZlRr\nJuuZ\r\n=aaKi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5i2QZpMV0ljues4N14z9NLxt1HjZc75wvJ3C6TfpdEAIhALR2Z3a7mUxYjFdb1DKxq8k/5dl+Ek4E0AzT7N3SIHi9"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.fa21f639.0_1589218237264_0.8711138250223736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-select","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a5aeb3001.0","@material/floating-label":"=7.0.0-canary.a5aeb3001.0","@material/line-ripple":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","@material/mwc-floating-label":"0.16.0-canary.2772c509.0","@material/mwc-icon":"0.16.0-canary.2772c509.0","@material/mwc-line-ripple":"0.16.0-canary.2772c509.0","@material/mwc-menu":"0.16.0-canary.2772c509.0","@material/mwc-notched-outline":"0.16.0-canary.2772c509.0","@material/select":"=7.0.0-canary.a5aeb3001.0","@material/theme":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TQBQIY5UaEdlITRe5aweLOTSj31Eg84Xh2wHK0CcoqMRFweAlZSMlg1x9gS+lqcynI2A9DKQz4rHgvmzErwiyA==","shasum":"4411306b509da1f1ac675060d06bc44669fe7038","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.2772c509.0.tgz","fileCount":46,"unpackedSize":893981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZtZCRA9TVsSAnZWagAAwGsP/3+RkZbMjkOMHHdwuhTx\nQdQiIC4Gtbt0CQGWRY8RpyEBoMmZcDikOw6Qkc9EvvDAxPVcqVbx+XXVveDm\nNedcbW6w0NpwcXrx07NQ8af0E/9mYdepYb+Owtv9cjUKt8/1ytCD52/q0M9B\ng7k6VROsDS336cqyXC293P3k3FTkkbE0TLbEu2ssvYGCNcu2IdiiASNdcxAv\nBGX4LNwsqfmpPTmu3o3SslsDp+VzOyyPiR2KlnITXltSbxaSgLGZwfBtirpa\nTtaH/Okc+/NuN6lVdc/3V9v4mS08IHxUMsSslGC6CpNSI1QJkqZ+1fNjtd3d\nYIJRZcxtqiT0b0fbh1x0CKo6+UO09gnMopD7hlelaK4hlJnILA/xinGz/rtB\n6SEzEp8VMkskY8dqZfhvZR2dkBQNsj/dvrLOalm5uOCu3deEE/oi81BLLqA0\nVuFxdemsiikEOehwt7ywiPX945UO6AJNePtIU6Zq6XIROfYrgoAAgGOInp4I\nfufvwd3NqEda2nDJtd5nnuhlVP6ZJ1NY4v6rm4eZXdXflNDqwkG11IFpEbTF\n2jFtCs/kcE+5+W/DMJ483VNGfQ/ygH8k85p74Os/34GwwfGzxeaVwjlIc0YE\n10gVJLW4z8ID6NtwrYtslgDNhAcKSWmZ56VcE0X8VYk4WU2kQkFmNyLQ9Bip\nOyV/\r\n=ZAEF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHbpp4zTaAKF5rzKcmItn2TuxNlTR62uFs4LyvbQhnfgAiEA4x1b2L1/H/rU6AnbExqyoAjdLfsI/9U/jdX8Of4jweI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.2772c509.0_1589222233066_0.17196123728477053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-select","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a5aeb3001.0","@material/floating-label":"=7.0.0-canary.a5aeb3001.0","@material/line-ripple":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/mwc-floating-label":"0.16.0-canary.fc4796d5.0","@material/mwc-icon":"0.16.0-canary.fc4796d5.0","@material/mwc-line-ripple":"0.16.0-canary.fc4796d5.0","@material/mwc-menu":"0.16.0-canary.fc4796d5.0","@material/mwc-notched-outline":"0.16.0-canary.fc4796d5.0","@material/select":"=7.0.0-canary.a5aeb3001.0","@material/theme":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YcmLgNrelrr0UKtZmPpQmB+h3tYrwhdwA5asiEUReoHsAkyZcdLfKnAyB8eLWz4jIQzAOgisW+vDzijcOIAhMg==","shasum":"841b7449a83b32dc174a3481dbb5630f057a53a5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.fc4796d5.0.tgz","fileCount":46,"unpackedSize":893981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubApCRA9TVsSAnZWagAA88sP/1FLJNYDn2OhbJo1U4//\n8vQ0LULz9EMjUVHThKDJCW+N2t46kipDaUFVLw80/k8OnUNWOmbhhQz6BDth\nBK3sjKOV5muxneeclLRIVpSejSKH7CwVfh2YWAL1wnjwHjGiwgCosPPbOobc\nIjZhN90J+b6eM3vVmng5j0tFyqssGgoKnAWSXDye4OebVJJjbmirbJx9n3M3\nIxGM1hSmlFTb3Dphd0QmzaIP1DLrz0cz/Txzx4ky71zcdFQVtlUngEG75C1b\nlI161J4662meyaxymqUuNglkuD9eI6iUtYfLgWOn3/+rO6fQ5myhmvVtarHr\nUZGDpf3IjbR8k815Nz96jwxnMjCzHRFDxFS1eOIOHeREbzPy6cNXT5INUKzk\nYxuuK68FShQHj/8g7VBbPAHR+82UHF9ZiI8SO5p1XoJCk0/opabqa5UHXSv+\ncz3tUnmRiJMlMb8fjjYz7kaTesjDuezoUhRN3VxVwT3Z1w7kOvh/0A5bg05Y\nKMk1hZVCBJDnSqCRmKxtktN4NDllDSxZehcjZrrnML3FCFZgbFS5Oo8GjmFx\n4I0yaHyqthrYYESuaGCqcA6X5qD3KriFGdpLhDv+SZZpgEQKJiBV02975xdf\nivf2rB+vgGmoGKtyCN3uyyVydVDFmv5N9/hI+lS8+FL/Zt7I7AhUlLDS2ja2\ny2/w\r\n=/BZz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDC6U1MHkxgbF6/jw/hXFO1BqLIkEd2ivk/VnzOxXxCLAIhAK5h2AwLPyEWJeEF2Bmbx2UnEXt40U4RvLsxQjaP4HXu"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.fc4796d5.0_1589227560837_0.9315661970155475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-select","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.ed52af767.0","@material/floating-label":"=7.0.0-canary.ed52af767.0","@material/line-ripple":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/mwc-floating-label":"0.16.0-canary.0d1c5f2c.0","@material/mwc-icon":"0.16.0-canary.0d1c5f2c.0","@material/mwc-line-ripple":"0.16.0-canary.0d1c5f2c.0","@material/mwc-menu":"0.16.0-canary.0d1c5f2c.0","@material/mwc-notched-outline":"0.16.0-canary.0d1c5f2c.0","@material/select":"=7.0.0-canary.ed52af767.0","@material/theme":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RVZmKFijsIo7qjZqXiqUAGIfY3MTvrqTyDSlg2cavFvQrdClGIdtBa3sZ8wKxtZkFq/lv3JXkD6DPBH/+zZ2lQ==","shasum":"502728effce4ae5f2b621ac320440b935d7876a4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":46,"unpackedSize":893251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucGUCRA9TVsSAnZWagAAgCIP/10+WUjDrqfKS/t+/vJ/\nLPhmPPsHapoL4o//t2im3J8P5JnplwnypV4kPTv0CjhP2LgGTbuB3Dl6tfk2\n4ki2hrrK/yPRiMcKPtnHz1X8MnPVounsfjVR20uYAFCPfd+jUdiE0JzEGuD2\nAumUwjChO/RidKaxeH6ojdAQYsFrW33GxBt3wCZd1whP8MgDzC2uMxQ5ZT0m\n43+gAJRt+cEesPq99R8mUkspnWmyt4YtWg+l3lv+I0mSc4GPm05k8nGlrNbu\n5FRWEP1eX3sHRLolqEnR1k2QzkQNsQqny8H3C2oGhQ7wgMYRWHBkx1D/+uLG\nFKKC6TrsQhG55fnWRtxlXz+abqVf+JypVJtCCWdao33/34b8EX6UJnFa7YiX\naYvy2MnLhxGPxMs1c0RR5boU+Si+ldp8a3/TOQ6QVPlZq+GgsO5cJv3kT51E\nja11RKTNaAODIbgrWGBR3TxhWL39dvr1jtq9zXZQM+Imxlis6au45SxFg4sM\nAUN9i1FN2SEbQi1vfVD2OWbanUTmG/Kh1oErqdHtumpfqjI930+F0LhQbSZI\nKobrVAampLGe/AMxsXg7e/UveU/EWaU7a/eKIUl/o5Yk1FO1/4lbQu1TuqSb\nB9R6l+l0/VlFumU3DDvEjm1pK9bxtx7iFSt/7EgMwoJ4dTiY32ixZD7QwWDw\nzVYY\r\n=yXDy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZyMjN9HDMHllYQ2JTE/iUxeKyGtEdkviWJVIF1KHgJAiBqIFOotsCbaXHFrXCrHFP3IJJKawOtcPQF+P1T3SNDUA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.0d1c5f2c.0_1589232019731_0.7573023626938087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-select","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.058cfd23c.0","@material/floating-label":"=7.0.0-canary.058cfd23c.0","@material/line-ripple":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/mwc-floating-label":"0.16.0-canary.d083d93a.0","@material/mwc-icon":"0.16.0-canary.d083d93a.0","@material/mwc-line-ripple":"0.16.0-canary.d083d93a.0","@material/mwc-menu":"0.16.0-canary.d083d93a.0","@material/mwc-notched-outline":"0.16.0-canary.d083d93a.0","@material/select":"=7.0.0-canary.058cfd23c.0","@material/theme":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uFxkD2orTqsUSui4IThfY0yMZThp+jvWJZ1SPB/0rm04CixRGUMHtCZvY9WJSv/cWs6I11vxAlF1agB4ZCeYkg==","shasum":"03324797c0977d9d5b959caf7f433a658e283cdd","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.d083d93a.0.tgz","fileCount":46,"unpackedSize":893251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetnCRA9TVsSAnZWagAAiwIP/1CqKZA3WcdgPpo3C0Th\noeLa7pmR9Grzn8OM3qsk1ln3hKwx9nJU8nNbL6p/JH0XnQqD1piL+qsNANWp\n5gMax8cabBs2d+IDdsx52XLKSGLkBoBsOOQeo86FH6FkyEBAKv+IhzZa+nmH\no5KyY9eG77p8pmuahUZaA1HqRkYL2V1i4pv6dhuf+LMs1j+ak0LOE4UhjnCq\nQQc1rzuUKsRSZiB6hZcD98PAZx8FzEuapOF+DTAMVCmNlGuDDR/g1AcZHicj\nn2PeUla0GaWDrNxhnpW31r1MRatkHxSiyue0l5oKvjoX2a3zgV9kFoPYakrU\nx0//HOd2aiVg6HaY+GJtWojRVx6tZIwPaRmBLVF31pBWHPmCNhEiBM9wMFg9\nNKsu2Erkkgb95xfna9kLlPnClyRzIyxTMnsg7BLv64AhnYIjYhrFx7z6CNWX\n8QEoUmg7lIqqzBoh6K22TR48u1VMHBytSvBUcDVyzGdgQPzDPtSIvNMd2XOB\njeCKpRdNm/hwVya9SX8SI47SqpFQNhRFeH609+Uu0/BMo7xnBOYgGi0AwXv3\nR4IwYmF+T2R7iyB0KuvVqDCIh2PADMxYBiZw9LOKq34mjxEll4cdlTcGMS7B\nhk1PgrH9U13Jc5JlWoLgEoBCKp5hTt1WhQ32MieSMklOdlthZt49ZPfuY5sj\nJI5O\r\n=e4tY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvfSdT97lGO3lzuSdGvdtjDO8ghEs8zT/6/Lwch8U8GwIgGShUu+my5gOLsMVYxcV6nAas5IZv+4XhyPREakMBJeM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.d083d93a.0_1589242727300_0.5750077857879243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-select","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.058cfd23c.0","@material/floating-label":"=7.0.0-canary.058cfd23c.0","@material/line-ripple":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/mwc-floating-label":"0.16.0-canary.c95d429c.0","@material/mwc-icon":"0.16.0-canary.c95d429c.0","@material/mwc-line-ripple":"0.16.0-canary.c95d429c.0","@material/mwc-menu":"0.16.0-canary.c95d429c.0","@material/mwc-notched-outline":"0.16.0-canary.c95d429c.0","@material/select":"=7.0.0-canary.058cfd23c.0","@material/theme":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-V46ObNaPAsS/nBzMTAfyEYt/fQsEYTKLL+h73LdntGxiKd1GcTXwKA0lft9iohiUdMYeOUJPTEmIKyWYo+Tr8A==","shasum":"1cd1bca48dc1347993c3aa4f7b1447233881b764","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.c95d429c.0.tgz","fileCount":46,"unpackedSize":893144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxcaCRA9TVsSAnZWagAAeJkP/3KVug9c8U+dV/oDpHnz\n6UTW/iN4a5zJOiNb0Yoe0hMkgthY+VjrhoxdwmhETsmNxfQSGyY7HUD4SA4g\nJUa4P9IIPpmyqDNb8x57Wuca2C86xOo41mHxhwqX3Y1/2Hdacmbsfs4VdEG3\nmYpRfg0xAIhFeJOx9aKJ6H9MBGJJHo2uQL1Cub8x9G/l4K2gWQlL0MYAfeM9\nVm02JgouReg0ngF47v+OT1JldsiyLjGPpJ19BwjGMx41Nk29ppAI7GQ4IBW6\n3huEKmIOjb6mGUDfAADle63WKLncivCEjNa/SgFlbwKKlF94GnCvH99J9sWw\n1Cw3JS4eYSX0483DYAi3t213t2dxpkNmvHmvHu4r0IIaTJbmWIqS1SCBEp6z\nC9zyJNIUrb3krLK7Vs/RbQfYLBjgGwBbnj728r1YWYYhrxFQdNnSHiOtheQ2\noQIvDN6akfbsz1NApp3ifwpRRnlgTnSvQ6QNh5KSRZdeKEL3YCAUCaEk3EUd\nEhKk301om38Gsxp8BWJ9my17VSopAeZNr/TiT0/xaRJrw73G02RRg2LSGirC\n1ESltlPMbusd9o25l8X+7dPWdZkgcZFCZT3+L7BUZ+uBDkmq6KPVHJZ6T4oQ\n8uvT6+pM2Eou+YfoMhrBLAiElAOWw8MhT5/8N9JJXhncnVj1TsmWwC4bc9II\n78Jq\r\n=q1/B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCK34+6eFG/mfFEGPb78C/s2JpBmOIyPe2fH66xmsIXgIhAIauiQHQ9xHHnJZbJUOxkZm386gnb0driN+pTPtZ91WX"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.c95d429c.0_1589319449986_0.039475009627104596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-select","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.0a371b4fe.0","@material/floating-label":"=7.0.0-canary.0a371b4fe.0","@material/line-ripple":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/mwc-floating-label":"0.16.0-canary.0c1ad726.0","@material/mwc-icon":"0.16.0-canary.0c1ad726.0","@material/mwc-line-ripple":"0.16.0-canary.0c1ad726.0","@material/mwc-menu":"0.16.0-canary.0c1ad726.0","@material/mwc-notched-outline":"0.16.0-canary.0c1ad726.0","@material/select":"=7.0.0-canary.0a371b4fe.0","@material/theme":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-T1hbgJiItNlm9ldfnU20WmX/1ci1sGVIvCMX3tChV4PCn9Mnm7aSF49P34e4pFpR9zuNczmn/WQSrwVMG98h8Q==","shasum":"eb29ca0ce7623c3d7addb5d5a91027ad11b15bc6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.0c1ad726.0.tgz","fileCount":46,"unpackedSize":893114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CqCRA9TVsSAnZWagAAkjwP/1CUfa1o+A9ZPWi6NsnH\n55ilS30wmDfKewwmNagIL7mEF+8hulhZtHfu3cNjQ108zg4/qfMNmsZNmAqE\nASDgu/L1sEl619lu9c/4rNsZgXRz9PsmZMjLMNKfD1ECp4dLcwpWIPwXzspL\nA1Rpjrvp4Yhh5CcQzjyFyci2dq56sJ+XCqKdKly1Ggtg3U4KZec8vMU/9tFx\nBQyxkY+eXQMii5u3B4JYq/CoT+B4a3Xy9tuN61hP+Yq/RSQLZFAFsIBYXnYm\nUeaRYBd8fdaZae2lpNAB8VJFsbia3k1qbJCrbhuZpRaEYznK9wMyzaf7emBA\n4aeMKYWP7mFlLMLZCe8M8qQKKXBe368nMD+eLJF3rBmnb3ciMcORVE1Q+dwY\nVQZzi0SHvS1gIbQj0ZPod2tNoZZc3W90QwCZEdeBDTkIrjLENNawFJmDGRgU\nfFtJY3tRoYisaEC5GCW+ziega6PQT4fC6gQr8A2tpweEB9B8LlhW+hrxBHaN\nxPcSJqo2O7RmN6PTrk5ISYM4QlnkG2ygSxaA7FM9OYajjliolDd3JshJew/c\nolg/JDtIPzdzItI6FEe0FGxn2teHmNPFnTZrAQf11e4Zfo/cHEuMYRpcsfrt\nurp1k8knDfKdJJT6klikAk0QvE+hgIjw/gqXwtcmvdOGx0XWEaPTsaiaVlqb\nKHwY\r\n=NL6b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOadWBMalKqswwwKfR5kwIizxY6lD8JSxcjpKe+/cgDAiBg06OgV3g+FRRu0BbNsQv8k2VIROlSmLjnfv/f0VgLYQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.0c1ad726.0_1589330089748_0.985699455499192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-select","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.2139200b3.0","@material/floating-label":"=7.0.0-canary.2139200b3.0","@material/line-ripple":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/mwc-floating-label":"0.16.0-canary.8b6a4700.0","@material/mwc-icon":"0.16.0-canary.8b6a4700.0","@material/mwc-line-ripple":"0.16.0-canary.8b6a4700.0","@material/mwc-menu":"0.16.0-canary.8b6a4700.0","@material/mwc-notched-outline":"0.16.0-canary.8b6a4700.0","@material/select":"=7.0.0-canary.2139200b3.0","@material/theme":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-T120yeoBt1E9M8AZMQKuNGRvm0BNQ7A0RANGnX/vpnE1C4Nd/tyYJ5qaI69wp2kkTgNnhPfMVHagV0fVNo/2TQ==","shasum":"a2b6f0a0bef834534fb83bdb0970223edb150cd2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.8b6a4700.0.tgz","fileCount":46,"unpackedSize":893114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCxDCRA9TVsSAnZWagAAwTEP/AxBSzwRMMjEhs7X11Fg\n9B0WP9iO7UyMHljcYJN86JSHucX9yHGXGBAeEalz2uUia9qcXhtm5PXnDJO9\nSCIXbOjsjMPUq6sjTBzIxFmSwwT3ycTFHfJhxLX4hieb/mtShUH6Px5v4ePF\n/+gOu+H0bT3pj1BbkGRtZfJCnsq7GGI9EDNtCUZK88MDt8BDrULt1KcjNLMF\ngYo5srUTlIaeUAE2IoN9VVVB0CJmhBlqgRncJitXVserO7soPA0SDH11XiEn\nC8m9BggzpClCr4TfJBkZBNW05pluma/hpgWUkWH7PY/zs/qkznA5EVEAglVO\n5B2XJV73H4E4sCWevwftqdxTRl/tVNb84rPk/9scaW9L55kd7M0mf9aGpMPd\ngX81tBEyJUvIBO4QH2kJSkbQ0IpwJ01BndtDgXXJ4sNFBerfkLVZYKWqVmAa\n0bTgjqi3DLlTvl5BUjenc1acYWz7XwLZDsWQhMrdrWKz/+ABbYexEIDdvloC\n+xdrvZpgjGAitXA4T8rK5zYGbMZVn50HbIekCZz0LHJeGhOIPWE4AOBr6agH\nc+dh3EENgZEhrmaseFhXNG+1ONHZduJ3eVJosAaxUt/o3GA/F4Okc59N3P3z\n6DS//ywzBzqjj/68/ow25EBcdZb6MhAKRTxvG1OQVnqB6t0Z3jX08IPkfumc\nsS40\r\n=zVHQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/VdkM+Rs6rQNC58Qakm0qitbddjvXUrhwa+jRwbNXyAiEA327P9O6pT2Dt3fsNHUV8FVl28yqmg4sN+SoscEGS/gM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.8b6a4700.0_1589390403459_0.9342451956560349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-select","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.2139200b3.0","@material/floating-label":"=7.0.0-canary.2139200b3.0","@material/line-ripple":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","@material/mwc-floating-label":"0.16.0-canary.3270effb.0","@material/mwc-icon":"0.16.0-canary.3270effb.0","@material/mwc-line-ripple":"0.16.0-canary.3270effb.0","@material/mwc-menu":"0.16.0-canary.3270effb.0","@material/mwc-notched-outline":"0.16.0-canary.3270effb.0","@material/select":"=7.0.0-canary.2139200b3.0","@material/theme":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YHK4YL+wfNchdIAy6gGX/wWvNlxbFCB/zAtRaVZ6w/I6aFt33IaxJ5zqJ+QAJw3wShQoupjq4vc3Koxo3SIpCg==","shasum":"4b9287d2ab4a0646b48f0da8d564266ad3c7c994","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.3270effb.0.tgz","fileCount":46,"unpackedSize":893114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGW1CRA9TVsSAnZWagAA0s8QAIXLtcLlSf9Npj88RaVf\nMmz1cw5OfKV/gMqGFRHHFVr0v/y1iJP6fm/vL/+Mdieln9iy+REI9nu+0tQ3\nmkrSKBkrz6HFCypLtFdk42AM43uIw6apk+cWEu0EiNWpYW2GsPw1y+gY/PwO\nzusLXzvtHilMsV2CkmuEMG5dvPdyduymtAijE/aHckv4smIyn+0s5vf+5+nj\nT0Rqnope8XP78gE+Qn6gDqpz9VOvaQyJZEyqqDAMADsAuoEq3CsI0/oP51Aa\nje+pYljkVT787Yi431B21LUWc2n1K3LDcCzDq7BscvWZguE/YuAKQsbIs1nF\n8nCmimIq2OBt+cATT4NGXwQs5DMC4tmnxeCGx1jlNeDHrPWibcQ7cnKogyN9\nehrwWiHdopK6fTBcHmzqFR7XZE6vQbO3CJ6s4HoxJU3sW+kvZgF1oYoIMUca\nikUMXd99PD3+CzSzJJC9GyqZUeAm57m/neC+grFQH9XqNhI8mLKnmdO3lMJF\nRGgpnVZ2wZ3E1Clim5Z7AhfjlwrhTR72pnMvJBsqVdSNoAVvAq9KgrASprqj\nBSQlmF3LEJfSBjDOmrT9bSt0j4D/ukb/mdbCEGasEseH/xHjmhbeGLRbEUFu\nKTaGSrxyyh7CmxbTYQyJgAEI0KBSrBbASJ763lPMHCxoGGOtAE/A5Z8Dfrbi\ndw3k\r\n=FYke\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrsXkngT4XjgUvVV5uYtvjizN//rMMyspjlR9jwSRTeAiB4DDxD48iRBgbMoHekihfsVe6wzK405PtB3maVCwQH6w=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.3270effb.0_1589405108580_0.10444945412165274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-select","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.2139200b3.0","@material/floating-label":"=7.0.0-canary.2139200b3.0","@material/line-ripple":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/mwc-floating-label":"0.16.0-canary.832e64f7.0","@material/mwc-icon":"0.16.0-canary.832e64f7.0","@material/mwc-line-ripple":"0.16.0-canary.832e64f7.0","@material/mwc-menu":"0.16.0-canary.832e64f7.0","@material/mwc-notched-outline":"0.16.0-canary.832e64f7.0","@material/select":"=7.0.0-canary.2139200b3.0","@material/theme":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z6d9jxAxT8LnUZYFlgkgIwop1I6uGJooUSY8S3ZMzL7/RTjjdCs28vfQOWS9tj8ItdFruorjdLXrXjzOwxqSJg==","shasum":"e1642fc0506c7f48dc1eb75118b39cf7d53d8654","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.832e64f7.0.tgz","fileCount":46,"unpackedSize":893114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJZbCRA9TVsSAnZWagAApHIP/3n6n/VAML9AoPqfcJlx\n/M4iFRaKxcPtYeHqgR/U50fd8yh1TnNFOKSLkR/yEYIByYd+yU98QknIkT5B\nPHqEF3Lq2DrhC1tYUH4hlYRsJTIZhe+b3gFSuGFBB3IEFOSwP5nF1jE3MhIn\nfLqvrBMHjLVA9hC9AOhSrZX8Y5v4JL7heqoktg2y0mNBhwVrXC4wzGMZJxnT\nyX0rRn8bMVGc3VTg3+iqp1GstM1kkjkm3OaOY9apXXD8lJZ16J6rqTO35lVN\nfiGpKse7AfZDTPxp/Qjzk9QXor2fEOCHLpxiyxCtyi9H5aNfBPQlGBj1/KNo\nItvUWfOFgM9amMkas6HAIwSgNkv4tuhqJMc0RU93Jd6Zup2rFt1ZdPs/TWf6\n8Anhbd1485YVjFzyndSM+zuXq5kG0ubqCl5zFSuohVFCd08poO5XQ56DryLI\nw9FO2LWGRdZDPz30pHcRksmcNC8xXiJPhRlcd2TY/btn74n8I0sNOpWrLuOM\nsKdDA2qhK9IgcD5YWGHBBs2CXPUv+jDJNZ2/x/mv0CEHetLiyQKvEsioyFAG\nYe4lKutog8LgCSd7+wP8lHtPB7MZhHbKdq2fiVeyoAvTtqrJCxR64ZHP10Zr\nTABo+3XQ/9Jo/kxz8pkKujh5+84BKYXJUAk0E0ErgsReti1JwQPJaPpzzEUJ\nJvHJ\r\n=ROry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAa0TOVe5yl57XPxGTxsn6J6S3Q0lzb7O/isNv762kJAIhAKGcWcXiy8kaRaastPuLUwS2fZZOc5VUxAZ3dR0t6yIz"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.832e64f7.0_1589417562990_0.8557505900572677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-select","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.2139200b3.0","@material/floating-label":"=7.0.0-canary.2139200b3.0","@material/line-ripple":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/mwc-floating-label":"0.16.0-canary.472fc4fc.0","@material/mwc-icon":"0.16.0-canary.472fc4fc.0","@material/mwc-line-ripple":"0.16.0-canary.472fc4fc.0","@material/mwc-menu":"0.16.0-canary.472fc4fc.0","@material/mwc-notched-outline":"0.16.0-canary.472fc4fc.0","@material/select":"=7.0.0-canary.2139200b3.0","@material/theme":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uUSVOu4j0Ba0s3AYS/W1GRigBEKVz6AsxOuQZP19ICV0WUf2B0nV+uGCBroKPD0iczaBFnmjE90Z1iUbasTxOQ==","shasum":"06e9e443744ae2c8a7c4dbe4c38164a8550fba82","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.472fc4fc.0.tgz","fileCount":46,"unpackedSize":893114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLzSCRA9TVsSAnZWagAAIJUP/3UFggZhmFMGKqGYqGga\nVYkA3dcNgwxZB7tVBgcgKIQ0sdVzSa64nNhTtrDklD+peiqfkxiMxuGMDEL+\nKSkxkgve2wfTmnwJL/lwHRjOSZzVyeAdgMvDb7wBSd3k8RHfurd/B3dnWUkq\nsaMEbniVv7XR1AONx5jTkydpDBCK8m03qN/C3eJK1E3DSl2LPwTQVRxkCtEg\nEjyYN991zhPw66GmR9ew4YF2gjdGmYbH0Bz58OoZzDwvNx04zdDcNcxythbE\nJcUyzMtqGPDsPfInkke1mfBIjRMftZcYTb69CWV3b6/ZfTevKJUT9gfKjMdX\nWnZiqE0VM+7PrSGPb701Na36qEiOncTLCmtQYkcJIuxdM/QxOnFD8GezpNPw\n+GnaaKD034BWFu5+daIO3i9yFmOcJFH/Dfiu5RWYhfcmwVsGtoxMAPlTPV8c\n/+q0R72ud8JgQvo7MCWoqLHN2ahI1PUyTiKglq55NsMnmBormq806Xy2+3oO\nV0uu3bozma7jAKyjdV9mNbTq89pYnX2A3dsQjG7OuZM9HJym212Po/JyS+CA\nTymmcH4mZGe3piUta8GXQuuGEK6Z1E6yB8Ex3dvVBac59reCGhT1VmY14+Wf\nIwrbhF1mxVbK1hVqSITnJpcZmqjCqQtdvdKD0r995nZRLHUZZQMAj6I488ti\nuaRU\r\n=sg2n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpmWairQocX9iMw5GvotzQIAOyYME1UKWcF2Q6UbXu0AiB+vfFa1bEChVYvZPf3TIohmi1ZRDBCsdp8DLnftZNhpA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.472fc4fc.0_1589427409842_0.4475995466410283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-select","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.ad0c0c103.0","@material/floating-label":"=7.0.0-canary.ad0c0c103.0","@material/line-ripple":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/mwc-floating-label":"0.16.0-canary.4dcd7dd5.0","@material/mwc-icon":"0.16.0-canary.4dcd7dd5.0","@material/mwc-line-ripple":"0.16.0-canary.4dcd7dd5.0","@material/mwc-menu":"0.16.0-canary.4dcd7dd5.0","@material/mwc-notched-outline":"0.16.0-canary.4dcd7dd5.0","@material/select":"=7.0.0-canary.ad0c0c103.0","@material/theme":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mUBV/OX3stzvvi1zetLRXVGI5wiVhwj1ZP3zxPo3WSkH4jBh4S1KzS81iaxPmk9jVNtThaQ4K+tyYtsIIakTGw==","shasum":"e2ce751e3dc0b42606abfc95d426240560d7fe4c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":46,"unpackedSize":893114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXEECRA9TVsSAnZWagAASR0P/ihd1pKOvYqoyu2Svan4\nRN/18ruPo4L8zJ/tilOnxWU8bVto/UrSiM+egvZi4lCelxVKgF0fVNHEd8u1\nAolVhQ+jaxmP+P4RJe6r8sqeITg87KFXWvnJZ5DN3q7gwGw0wNICpTkfTUqI\n6wpNH5U946EZ5oLmnB8NclM+XCLou7LpIHn1Nw7+O3HyiNPQ1IBcVYVTAqsB\nUjNf4FhZkGmCLizShOe3BZdqLAp0D6pWVHvWvkskDuxBWdRCohmVZ0GQJRwB\njvomJBE9AZXAzyaZ552lj1nAI0KPqBxQ4D2Hcmv+ekpQ5jkduw5R2GatS1LM\nyCKIiXTVaFuhSArqO3HnFbWPRn1NpyKlXKRKd1o0+zgQQzsTVVmvRJhvv+LZ\nav/WW38SBf8BZRNtDceopwGh5lXmx+lq0hOHggUmp3yoakrfJyOAKJLiEIeM\nYAbSxEm6wHw6i9JZ/7dwvAtNn5EMzMRinuQw84VnjWof2vtHDYczcOMM2WTC\nkSRPU/b2GfnRvmrHdlN90q1mEzBz1sPlQZj+wcJIhqb1OWpWVIfjdNikR/o1\n54wxOtBjeqtydD+pTwGcbhwJNhTlUE8nYm+o0TvQ00sFG5mWH0T9fLXQN2Iw\nlW8pul7witXrUEMuMkDXBXu0+fsLl/Fw0zSkBJfUahbawhAlCIZ8rSLdl0rt\nOYoS\r\n=LoX1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7JJKRbC9+wvZwsaCdzKAKXh3iuKS9tZaXzzphtAerOAIgSiCAxE4X1CFfP187OQfvx0EElHb8qH6+huqfa8WvtY8="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.4dcd7dd5.0_1589473540124_0.8393722681044054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-select","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.ad0c0c103.0","@material/floating-label":"=7.0.0-canary.ad0c0c103.0","@material/line-ripple":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/mwc-floating-label":"0.16.0-canary.bcd3400d.0","@material/mwc-icon":"0.16.0-canary.bcd3400d.0","@material/mwc-line-ripple":"0.16.0-canary.bcd3400d.0","@material/mwc-menu":"0.16.0-canary.bcd3400d.0","@material/mwc-notched-outline":"0.16.0-canary.bcd3400d.0","@material/select":"=7.0.0-canary.ad0c0c103.0","@material/theme":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rQuXzLlL9bjPdwlyC/YupWW09ozwtvAPaSw1iZ4D2H0vUKgW794ece2SB+1FDKW8nEJb9HZ4102R4G2UGCrr6A==","shasum":"53cfd2c181104d4495916d393000c77b2b91562a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.bcd3400d.0.tgz","fileCount":46,"unpackedSize":893114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyuCRA9TVsSAnZWagAAmAAP/Ahb5nl1eih5XAq3U9DL\nl4yksAmTAnrWY61RDoZJqVxyS4uutH8STRq4aZK61GMk9tJRrvmSDJQ5DaQ0\nyJOUjfCiWr2adENWonbA55z/8+KGZL9nO1O0h4uIvKyXTceZT40E93RbDqok\n9MThSUVffPeahiiyclQf/kOw7IDOl3rgtox0ShliatD364RJN5NUxdLnzULz\n/dnFaopt+WRlS1K/FOnpQVPAqR621OTThkOzDGY9vOmOQilH9fcpx6t+flsc\n0FQk7VsmNnUeHPsTm07BOElguByR6x/gTYRbKBlgDFXuF6R1s9xwOaWnj3MV\nVTXxseGa0XmIh5bNu8uF+Mg6orcmiW7E0bP6lpfB40mY9AjtkBqteXU69tk1\nAAirvcpdpz3NSQWZgP1lPcT66y06ESupacpLlWKnsjW0iZdQ7dMsM2DxY8Qs\nN8OnWEdEUMjTJBsVa9vOHhO/XV+fzG3DEURxEaOfl/69I0CyZgtW6HCvHxAP\nfIMWn8YZQMLMXTwRTbClV3fO+Eo4iPnVqQ4cIZxHx1B/aXkvRzqYHPvDAgtR\nSWV/O24QQs+9BsyD8thzwljfXfjK3r/QmY3KHQE4CvCZBQGpG6BSx/F8AcFu\n5wOQDlj40O0NzQ8DpEcCW8XBquemzUUk8wqJ6vPovbf52bfuI5C6dmCCv+ny\n8p9l\r\n=c+dJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9K90sPwMNjWHy58a5QjkUvVh3ginCmiJINhYDkcrrbAiAJ5gILdqU6rvsNyiAS2Ff5p/LOYMFv0HQk5N0FJjYv6A=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.bcd3400d.0_1589583022392_0.6132182749314479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-select","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.ad0c0c103.0","@material/floating-label":"=7.0.0-canary.ad0c0c103.0","@material/line-ripple":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","@material/mwc-floating-label":"0.16.0-canary.91f63179.0","@material/mwc-icon":"0.16.0-canary.91f63179.0","@material/mwc-line-ripple":"0.16.0-canary.91f63179.0","@material/mwc-menu":"0.16.0-canary.91f63179.0","@material/mwc-notched-outline":"0.16.0-canary.91f63179.0","@material/select":"=7.0.0-canary.ad0c0c103.0","@material/theme":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JoapezNPjPiRtGhjBTWhcC9ILq9WGgEYLSXwrURh/f3MfSzkCReJhdfOwzxWxMCNvTgHp+rHEcBiNjeCJo5f2w==","shasum":"7c994bbd03897953ddd97e9320b8f312daa9f9f9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.91f63179.0.tgz","fileCount":46,"unpackedSize":893114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzU4CRA9TVsSAnZWagAAETMP/0t7G6eekgf5g1fFBI3x\njvYG5SUPq4IYEYIXwc2T/r6wUxaEDbVFOYrMWYyzGHWKXsy1/AAu737W82AM\n6agbnPwAFMHXk4D5xcFEQMNszzv5bQDxKeVgqPLDVQ23s7tzP3lXhe+g6B7B\neg0c19qxN+33Nw9omvzQHlcDvW5RHd515wrDCWqyohryIp3of4+v6Rijax29\nZLqLl3FowsjhUmqMSfKt1GDF2Q2B8dVeG+s6aPU3i99mWyUBVRyUQAhXtX9h\nRR8cgq9dIFvEejYMzukul6MBGfAwSnMUY6J974xCDSQtMtksiUx+WV+4opys\nxkOM9oP6zH3OLDk2usMlqLq1KqtgwCG7xZSnO27+bfTFbDDZFiIdW9Ms2JQ2\nWin1JMJRSbpUx9iOiE78dfy/SRR2r+5C5xTot6SWNCmT+XwPU4MRGtmFgcZ9\nmA9UiD3LGqCbrtB1Hm9JSbSQetbNl9V2RhyOnoTuqqQAEe3XRlgg0i1LzuD+\nQ9XT8MKd/+6g5CCdw+MXUEwnlZrvU9UPWfpfuubAH1QBuuEhGF0wcLZ5vEhX\nRHl9Rrn7alhO8WIP8iVETQ9ETQ4yrubflVHbwtH8orPu6yRXVeJjUJ9W1q4J\nYEXoVrLCzNdAKSFFYajxXGZLqTbcZyQdEFcOMK0BHxiR4dQeK5zRwFdUaLOv\nnkSY\r\n=wJSE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTwCE4+cxp+F+b62LBmXHsAJ4+R+otLl8FmnGDwa/PFQIgNWjVSvOxA35SOu83wXE1XJgqQCtyT4yr2f35S+i0uqg="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.91f63179.0_1589589304035_0.665284542621851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-select","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.fd8f8f2b7.0","@material/floating-label":"=7.0.0-canary.fd8f8f2b7.0","@material/line-ripple":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/mwc-floating-label":"0.16.0-canary.b8aafb56.0","@material/mwc-icon":"0.16.0-canary.b8aafb56.0","@material/mwc-line-ripple":"0.16.0-canary.b8aafb56.0","@material/mwc-menu":"0.16.0-canary.b8aafb56.0","@material/mwc-notched-outline":"0.16.0-canary.b8aafb56.0","@material/select":"=7.0.0-canary.fd8f8f2b7.0","@material/theme":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UAYn8t6KfeKvT9RCgoJ+80NT4aOcda9RO0dUruijHQilPtk9vNa2mzFqzm30if3QxEH9yRBLSSartg8GO7KA/Q==","shasum":"43dc23cd08d3bd5e7ae46e5370d62719d0d82677","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.b8aafb56.0.tgz","fileCount":46,"unpackedSize":893114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSsCRA9TVsSAnZWagAANcUP/3AHSl4Gjr4z56FFdS7e\nPfrAEp4Gjyll0Z5uxKBUAgvgvZYjaldsiu+gQDOpss1VNUNC8yhZtjh5KqnT\nqZFZd5e1JsIasfXq2Fh+APCXzilhxd933eILgjAd/OR9ENx/bnasHXtjc9h5\nmjvbj4dwwJrxQ1kF8tZ/NwlIfu+twKAo6HsKPqJw050kg4oKbt0eV6BOIOzj\nUC+zKTESyQN9WXWR10Y3gYSgItJxH+nZd6uqfy7+efgFreg642Kp+Zslrwtn\nVYRycakBXcwsSxNUxeE2rEug+O42R/eOpkmfvRv9A1bphRfJddWtG5BY+hND\nBKR9OL45WICR15X8L4yb/YB/4q5PR0SRr9n/Ge31x6/X1vrr5O+kwJykLq7a\nArS7SHtoxWomD5g71WLSuL/3mPZ0ECVtsvqWgDZSir+Uq25xJ3cYSnD83AdC\ntVdNlD9cNqDiNEhGVmUyWLelFCkq4qpXT3RdrsBdDnnbNHSHG75O5UE76XX+\nQ/dFqMF8tWLUUlbkspy6xNTk8ObtIYhHk57ZaHaqpmYv7GM4L/Kt47FN0M9f\nqfFLJiiCVVMNJuAFWLze9vq7SZWujHXNG9m7pxHS621CHRC4KO4cmPg+X/Kx\n0Q75piAkSscLOVONCSoTb1gqwfycOQNARS9LZQESGVBMlE1vmlKp3gohMCSV\naebZ\r\n=7TV3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtHK5ZzJ23Jf6wgzBYS+MIRav9or07yult8yoNZRoSuAiBEXLqhXgMCKY4OSG+ebpVbSVEipUGVRBJZM/RP67oH5w=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.b8aafb56.0_1589826731945_0.0657397047629591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-select","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.730920fbb.0","@material/floating-label":"=7.0.0-canary.730920fbb.0","@material/line-ripple":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","@material/mwc-floating-label":"0.16.0-canary.a564b194.0","@material/mwc-icon":"0.16.0-canary.a564b194.0","@material/mwc-line-ripple":"0.16.0-canary.a564b194.0","@material/mwc-menu":"0.16.0-canary.a564b194.0","@material/mwc-notched-outline":"0.16.0-canary.a564b194.0","@material/select":"=7.0.0-canary.730920fbb.0","@material/theme":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ltZcdp1eJnfNMvB7sOMNoEfOMMWiaMASpPnbqTaUqVSMHk6jmzX7v8rL9FMPfnd/JJMXcDj95DD8lAQm84+kQA==","shasum":"dadde6939b376c3ce3be4d9a6fd543f3860f6f6a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.a564b194.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRmCRA9TVsSAnZWagAASmIP/03jyybaNWhVjh5TJU0c\nvTTUnnmsVMVdXG6FeI3uDJ9ineteAw27pSzMtfDKJqElrnzRB/ui4792DJ0c\nrhRvz+diJ9VVqFWOJ6FUoviZbTG1V55bP17kKDH5IciK8/O1aAV4vKz7MPag\n5VaIVHmIIWyyU0jn0WnuJxrjtU/lrW14ZcUeA8NUST44VM3InP+NRlwhVWk7\nYjq7YLkf6mHEmMZberIeVe4cR6Fw9wxyClgiEs13e1aIxyRAhgdA/B4/tPNw\nSLVAcPLU47TB0tE5ButXU5gKWnIhUx1w4cyINGN5zAHLBHttDJ0OUdq5wrcA\ncJQ7k6ryaV4iwPPkeD86o95xUlG2pG3oi9Xlq0EpO83w9BaSatscbrBAV88+\nJ32SpV1RPGjMnukAuVkgxiQglHmHZm6bx4UXVws8eDuE8YF1td8JRCiScSAn\n5zQoLj8PCX9V8099bqj3L9ot4YzH56N3Tu6mZE8XSa2bWh7McieMj8w074wl\nWAIknvLQfcQMmGVH/1SzyfCjnTNq1wXnHpUn+w93ENSTj9L9jjQUtESfYBW9\nUDVCbG3RzX811/VUyG8nm/K4IQ5NYf6tkbSXdQnvgyboenIji+mrHduOPH1q\nUWS0HXVz0dMjTBHMzkWVykg0zJW9p0bJgSa/LuV/dj+wsiBWiDYuZtxbNQNL\nbfSk\r\n=7LW8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/WFVVrMQxnoNj167FQEFsTRESXvaORHfR37M/G3+4kAiEA4yqNHNu3Ev+u4zAKlBdQKFHH4E7RGFejhli75DkgOAw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.a564b194.0_1589843046004_0.3492567545921803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-select","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.730920fbb.0","@material/floating-label":"=7.0.0-canary.730920fbb.0","@material/line-ripple":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/mwc-floating-label":"0.16.0-canary.ef56465b.0","@material/mwc-icon":"0.16.0-canary.ef56465b.0","@material/mwc-line-ripple":"0.16.0-canary.ef56465b.0","@material/mwc-menu":"0.16.0-canary.ef56465b.0","@material/mwc-notched-outline":"0.16.0-canary.ef56465b.0","@material/select":"=7.0.0-canary.730920fbb.0","@material/theme":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KxUnNpdaf5rvWyYCS6fWYvrarsRv4a6I97QT+tCIPr8RiE2bK//ktvCM3qsedU47yAz8x4qnvud2vXdsD2nKnA==","shasum":"53aa5722e32631799558b0c75c43e24ac98d21ad","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.ef56465b.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1cMCRA9TVsSAnZWagAAcRAP/RxDwXUhd8g5K8fKbCnx\nvn/LhiKnTBlgEn9bbUUVDd1tyMOlWQfsZ8WzkXcyq/qh5BQDc9rSN6R3fmYF\nDWlEMIY2QOEumJNynAzp39fJ4t91KMOhQklVW+6zrIuUWKMHYwd5cAuvd94/\nEsqlkkUCr9fZJ7tiIPyhlnnEtmM92VqPg+uMwE90Jz+/NkIkYURF0K421rcL\nL+fvrpXn2nxnq7tDeWcE6fMpxb2DhUL1+/nnYr8MkF1nXagd0+doG/vuqRXG\n3CcTt8omXh6YjkXkvAUMrZsEfFwe/slEmzbKbvmEE/8QcQBfKroH4CxhhwTu\nldmEsrXZOiUGqoe92P/tte2X7hyT2Qm1V/l32zli0SFcZ8MQQ/OY17mt4XIX\nxVOyNqxoiaihAFWGDNaVmPLJELzKWDy0Hw2C5L85ArIbpmdkAszAu6eeh8kw\nN4hPNcvwq5qmHLsYBPjEPLcDOIuYPj3eTb4/isbB6i/CawlZGt3BfLKjW6w7\n+VKWSbGWV66tOSHFADal9uuyvVxcoWZxwsSXAMxdRkZfBYNA55oMLU1LRAnP\nFOk34ZBh2SVlorJo86D03kVAGJEj7hsIyNKy2+VDcN99RMsfBgQ85Qu+BPYL\nNpvZATPH+pMrbQfQQSC8EMssA7gx58dhPFA/FlkGu5z2K0Zf6WClJVSdQyhx\npdMn\r\n=wpuQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDRfa9rP7Uq1NxJLWqi8T1IEVNEVojXmIiEOBUU/AWZTAiEAiyVOKCwOD4hzV5ZqMYb7Kf0uSm31n3YFwP3Cy7raycY="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.ef56465b.0_1589860108553_0.8534613673232496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-select","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.4497b86ed.0","@material/floating-label":"=7.0.0-canary.4497b86ed.0","@material/line-ripple":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/mwc-floating-label":"0.16.0-canary.c22dcd71.0","@material/mwc-icon":"0.16.0-canary.c22dcd71.0","@material/mwc-line-ripple":"0.16.0-canary.c22dcd71.0","@material/mwc-menu":"0.16.0-canary.c22dcd71.0","@material/mwc-notched-outline":"0.16.0-canary.c22dcd71.0","@material/select":"=7.0.0-canary.4497b86ed.0","@material/theme":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NT58x7czJriD2Kb0jWfnQHP5YsF3CIaHIYnY8S0IsLsjOy+MzhL68wFoxRXDR5C9gi9OtMAIXgWfsrkwlnXsJg==","shasum":"4652866c221f860dccbd378f5a694eea1e81b85e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.c22dcd71.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZnCRA9TVsSAnZWagAA4+0P/1p9e1pIPj+o7OWtonXj\nC3LGXjTAp7+4twUTskwGPJlPRTmweSO/FnF9oFhci0i7tthWmUYsI6qZS6a/\nhgstEsQRLrcRYxn4Sj8SMjmAp1VNFfGdOB3qQBT2VJQMbNU5dmNJZy0egbZJ\nKB/p0q+QyQPpGzEC0d4Skd8LvfuX/2xRmwnwFlRmpzMUAWdmU/Yh9kgsWS9e\nIRwS5EhURQT/odX7ebdom15bbxZ0B3xfPJh1pwBqZLvfRYzxoSdEuqeebIbx\nLIID9M8lhYhTkTHyek8/xNQvlGZSg/GxdQssCg26/ixKa7cSQUpCrrge3dPH\nfH90ZM/TkqEIACUePU8DeInD6wVcwsdsrd4JcVTorvC0fsoV712Yq63fsmWm\nbWnCKIXGQhEpD3zolo9o3O9ZPOClg7vjc5Kps3w5Y1vYxDQ1rBHEVIXY6pau\nnSsV+qZfxeYAQgAhsBGJGM1aruIAX0atBb1OqhLgLUvJpFnlO7EDyflynKgo\noDt++9ZSggaBrFyCpZYPnFGzWIRZvOnSV3yZlVtNkHZnxuD1POPITTCojnFW\nteRt+4sBjPByRXMCCdHAXrI0Vzah3KSWwbK7ZhIfczAzt46m7w352wXWR58l\nGnsIWR5636efNJWleahaUOkJNgg0OVIvibWzYSE4tIY+mfoNUIgkM6HtWtSs\nruxZ\r\n=1wQ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUhZ8g9+2eZd9M5arYgSSns6JCQw4JdHy/1nWlKBM0LQIgU0RG9Q8U6oNYVYH2yHjhBX74Ceu7oc6uAZ8dFjGtulo="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.c22dcd71.0_1589909095342_0.8032836493354305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-select","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/floating-label":"=7.0.0-canary.e3eacefcc.0","@material/line-ripple":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/mwc-floating-label":"0.16.0-canary.6eb62388.0","@material/mwc-icon":"0.16.0-canary.6eb62388.0","@material/mwc-line-ripple":"0.16.0-canary.6eb62388.0","@material/mwc-menu":"0.16.0-canary.6eb62388.0","@material/mwc-notched-outline":"0.16.0-canary.6eb62388.0","@material/select":"=7.0.0-canary.e3eacefcc.0","@material/theme":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-efkavhGUHlj1UDsyqtv598KVrUlbcOVPP1xKongJYJz2MOMFhkFRErmMqE8ziZbCzhWQ9Wu6gUCtdvA/FFxXEw==","shasum":"eef25095662b33d972b8e8ab778c45f0c0a9835e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.6eb62388.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPjCRA9TVsSAnZWagAAn0cP/iheiMr8Ye55gRA3zuLX\n4SWk1wLfoeM2+hO/oMk+10WHt4dL76mQbMYEfSPtjKG4VRXhs/Xbn0Hzdd+p\n950/Ck8BBXFYFaWWFOyxXSjGWhDkfkzHEavkwDoXvsY5/85xQWxOpEekKzNu\nxs3Kl0Z+dAvyIsm9Z3YNAIuxKHMKFKD6taeQApCy88uRxUnCTFefvm6Oelm8\nsAwSWW7UvXYZmS7BeQFENZxJqSFLRIDH+yC4iC7qW+RjtelS0UR/rZXUCPJi\nDGlFn+b+luiNyOonruwsskF+aw9gCBueSB+QlJbDRBxHpzl29eMDws7XQE6N\nlZFZK16f38rjuaIl/kWplS4W/qOmlfoIFrsgBhRBZuIHuhdAjuwaoqtLFuwn\nHF3PP3vC1NVDZoQ6oo0Vo7FF8DpJl4HoUjKkk0PR53C9qgpMz1ktzxpAyfFy\nRM9suPMu/d9gdWQUnWVFlGEY2l97RNTg/GgZLNMwWkVo2gzZyU4UQqGAQ941\n6+pbeTonKRYujMQTJ9CLoTh3nUJ3rXKhi1kvIHQyOOOzfhN8FtJADAvzg1z8\nOTLxJH0zl2cWK2jcWboB8NXYCVNqrBRFTgGqFxH51Ym4uiKFZApzl2sfwC6D\n9hZkjs1cMn+u9dIunE1O07ZbwbFFkztFA9zlfJDXWhVDVoCZghp7FIdOKu84\nXfqN\r\n=vV6g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgCGlTuLoWf5sQr2X25GOHgHSgipEfQOv7+pyfJdc/iAiEAtWRCpRB4I0SMo2ddcNeRfxyMDTVYsg0+TkSzgpRC4Ao="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.6eb62388.0_1589920738683_0.26813109313067396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-select","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/floating-label":"=7.0.0-canary.e3eacefcc.0","@material/line-ripple":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/mwc-floating-label":"0.16.0-canary.9bc3230c.0","@material/mwc-icon":"0.16.0-canary.9bc3230c.0","@material/mwc-line-ripple":"0.16.0-canary.9bc3230c.0","@material/mwc-menu":"0.16.0-canary.9bc3230c.0","@material/mwc-notched-outline":"0.16.0-canary.9bc3230c.0","@material/select":"=7.0.0-canary.e3eacefcc.0","@material/theme":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2SatRN5abAO/lfvhZjK5L3mVnIpTXTamEU1DvmbSsOcFEczJwKpIwKvL5yIrK3NHWBi1BCOtv59BQ/GrcYDj1Q==","shasum":"4a6ed966a86d6fb47f9a8a618c6086b200a0d621","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.9bc3230c.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFINCRA9TVsSAnZWagAA8xAP/RuLXogHApsbU1MLF0K+\npmwGa9I8FLPWKDaZk5E+lIo0xBs2rqUXUQ9aWhoQSlc+GqIitRsjHqEem2UC\n9Tr82j7CL8kx8an+NHERSTRXgqVu9fC5n5wUM4/KOp4POBjoW+YoV1jgGNXY\nSqKF8Gg+41N3iWH4ZXmoQOgUm+X+t+r7ACiS9pHFPZMvbgE7v1wOwSJomD0F\nKxA3sk9p99j9lImu2qlyzp7+j5cXsiAoNlb7UV2XDgF/uojqd0646Bwq3MGa\njzrkjXgz9Qs4jO7RZPCAn/+uzOIMBFNtGfdSBxjR2GgA7YyGqLzGeF4UJnbb\nsCi4rD9QtOTBnaT7eP8Xo7ZITurstCBZeJ9LtSSQTQq45sjTpAEN3xKP72Ss\nNGA2JQQVCVwMwvBMj0lhDZ/SpT5BFNAWR6hN/np8WLpLNga04W9Lz9HStApM\nZfCxzw01AAtqO33WfFaZYOsKoO9KFR8lcImBX001VNA5vI7jSCJNxCTW0WBL\ns7baCtQsYzJmxW17RMAVdmgnVlNQeHWT5+y0mKKmC9YooaFJr1IjWAUu0qYa\nu4mpJf1EcQI1LO+V9GROBHHgBUJk+JTmJXnHtZyKmCM7vKVeOgn8ntdx3Wes\naC/92R6TNSXECIPE8pAHddsOMxK4FOwK6JHzS3qd8tua/0h2x0zKGeQnljY1\nt2A8\r\n=5ohd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvLdh9SWcLLzvJk6rQqAl4Lhx3ut+7EBd92ybBpPw8SgIhAIqrkPjq+dySOIi4fPxYDTS9V5B4Dk1qUOZLogY7ZRN+"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.9bc3230c.0_1589924365552_0.34694180398577745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-select","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/floating-label":"=7.0.0-canary.e3eacefcc.0","@material/line-ripple":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.421a6856.0","@material/mwc-floating-label":"0.16.0-canary.421a6856.0","@material/mwc-icon":"0.16.0-canary.421a6856.0","@material/mwc-line-ripple":"0.16.0-canary.421a6856.0","@material/mwc-menu":"0.16.0-canary.421a6856.0","@material/mwc-notched-outline":"0.16.0-canary.421a6856.0","@material/select":"=7.0.0-canary.e3eacefcc.0","@material/theme":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-//6EN+Tue3Y6De2YhLj6m2WBLOxpe6jOhepmdGSrNNr7Wzq75Yl9gJwYr4TxJTPsgIA8gNi05r8nXI/j8qyNZQ==","shasum":"1947c3654215d864a8380f1eaccc0e5ded61efb0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.421a6856.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8cCRA9TVsSAnZWagAAZcsP/jje3Jm6pQJM4U59xcdk\nh202WJuWFMH4DsBCS4aNBLVAY76mzX+enDKyAitkDzEzg2p27m0GfDZnGKHe\n14HzcjQXG2F16woQKLuFsJtakBxJ5gIFrbU+dqyd5TCi8MW56ZPJCUhwYXAy\nOXNB3sI9GV4ZCNsXnMl1b3wdo5XQMEqlR8JLzP6GO3FLTFWTgr/rPL+YguWg\nvHH+w+Ya2JaOwDFuRZqakvfOB6qbOjKq1AWlbl88t9/jdpnoVgogjySe1doW\nh+cyFXNatnUZkcrhNw98yPtkr5OkEJqHzdGcCji2y8TI+wToWyoOJfWKAT6I\nEMHSvt8Lw+iaFGhR7Sx6sM16T0b77er8TFZ77t/hcvKVdJkoiPc5eOCt7h6h\nEpGS6Jh9tuNAk5CVXcqXkFHymM4QzTBbYqSne68lro6zSkJChHi8cn36+0Gb\ngQUEVrEAWy8Dvjni2pP3WiT/QPZpxoyclBTuVb93NlaURTelnXCAG8TyU7r6\nLBz5/th7PLGpvT8dQE3iP9L6HKcBB0AXb0ics/g2FjSrcxF1dDWPUZGyLmyd\ng3yUJFpvKk2b6+EMMdDu/4ELM28VxFbN97IYCquvK+tI0UzfUnsqUQKbNjYG\nLZ4k0uVog0FscGakYFyHvy1FxV066pVc4EZBU9aUnsw8puHtmVAcD8RDXFd1\naA2M\r\n=HRIv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlZMUkPpnUQAeTDsuQxdsr7zIVPVFCtPGkZM8f585jgAIgXN6K09et6luO6H7nc/8rxMMBm/00RBWz0NtlnNbG3RA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.421a6856.0_1589952284480_0.3546367993424515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-select","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/floating-label":"=7.0.0-canary.e3eacefcc.0","@material/line-ripple":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/mwc-floating-label":"0.16.0-canary.761aa6f2.0","@material/mwc-icon":"0.16.0-canary.761aa6f2.0","@material/mwc-line-ripple":"0.16.0-canary.761aa6f2.0","@material/mwc-menu":"0.16.0-canary.761aa6f2.0","@material/mwc-notched-outline":"0.16.0-canary.761aa6f2.0","@material/select":"=7.0.0-canary.e3eacefcc.0","@material/theme":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UgS4/b2UjtIwvnVY++XL4i5VR8wITdfvgICBdRM7IrAYeRRdN3UAB69KmayUny0hz3jXESNIjSNILB0cqnX+PQ==","shasum":"9d43d840c96eda2649b30acf3614db1fc48494eb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.761aa6f2.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaG7CRA9TVsSAnZWagAAfJIP/RG945Hz99rQ4pyuHQ6U\n/vU9TUZc2vCFkoxY7z8+hsJGqnjJZeXt8QiXcwruhy62J5bpe2dzPN0SWbbx\nTfPUGtowulXMFsNqo30aOkdt0erc536XrGFfZmC1mSRD0BDpMie+4dddsdEe\n2QFhf2Yv6lmVGaFOe7zWaUOF2Ktv7uVt2cWvFtVav5Ne7EmO510YWQ6h+DYi\nnGImVG5PfqvqtcmQVQwo1bIxh0p62lG0G0vB+N2PlOsBX5PWQHP9SYsyeUdx\niAz3w+uy9uuayO/7jzyX5+07AiQxu1+95PZ4wJNF4s0Z/mdQKwfOOrno2zVi\n6g1UXEHN3w9U98YFpVsr6N7Li02TZHhIGBJu/twOCc4pDCdmFci4ekfPLeZS\nyqU2RC6eThe5mqO5/xFcBw22w9rW57a62qF/L+iSkdALu/EZHMMW/seeADWf\ncaP5NQabtZSo8q18eHJiY+jCoGNoPp+fvBWVY/+p46UGJ7ZreI+uxdS9+AfK\n7Pb3m2rY9EpQwTLa15D/DT8jGtwYdx/pDCpwt79Cyalznk9WmnnvCDGkHQsy\noUyRb4Gn+oLd+BDMb+HYGieRTZL16lC5tnztNk/2aIfdiD4aLrlftzjz764E\nv/fhLv06COHf+003aY5aM///csKQ4rRjN1peKjAxnJ2qFbHzRqWf0Sh5iYEz\nPJhV\r\n=XQDL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAnqwK6ROWKXHPuQntRcqiyzf4KT8ptFJEs1o75YKZcyAiEAthekAHuKiDx/LS4nwPw/3KpvkAsW2Us8waC6ZLsWdtk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.761aa6f2.0_1590010298829_0.6275798061912692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-select","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.4ebce8d78.0","@material/floating-label":"=7.0.0-canary.4ebce8d78.0","@material/line-ripple":"=7.0.0-canary.4ebce8d78.0","@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/mwc-floating-label":"0.16.0-canary.f8654c40.0","@material/mwc-icon":"0.16.0-canary.f8654c40.0","@material/mwc-line-ripple":"0.16.0-canary.f8654c40.0","@material/mwc-menu":"0.16.0-canary.f8654c40.0","@material/mwc-notched-outline":"0.16.0-canary.f8654c40.0","@material/select":"=7.0.0-canary.4ebce8d78.0","@material/theme":"=7.0.0-canary.4ebce8d78.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zMsSquOE30pmT3A02YxkjZkIN/nSQZPQoU+wBLahs8iaskgoudBhQmkQnz5GVx+Ry4g1QmWD0YVDEYQstFyspw==","shasum":"fe3d79f9b5f940af5384abcc8c21880e758ce3fa","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.f8654c40.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPmCRA9TVsSAnZWagAALNcQAIfCpaGuBRMoMJ84I0r8\nLuWGNhNkIO+SMVgNdQAd/5xKsWJNrJsTUeP0RyTveUsKlTDuMkC3cDZHXbSz\nESSPYXkpaGYzN6oRyQ4C67Fw+226ZvfPdQpcME1jk5bo5LQmOnzTYRkgTU0P\n1VGQhuSK40Ql1kPgJGPBy3hhd+uSPrtCz3bxDCmo5kYREIm1C4z7W9vfe25g\nA7/jSi0Pt/k0MoTeEJHq2A2ldjYRXAwr3Tq1hQX2IKdqyngIXmjtNIs4FMqe\nBDTUd6Y+MBQJdzlLFX+kqNwNZ49YFnWKgroXpSC0LaPjkw0wQebr0lU5PzyR\nICMjTDDgfj1EkvnnAL4G8Gi5jmFvSpJUh9F9kYWLqay/5E79onJs1IjuNXg1\ndoJlwgwlUd0CKpsVyKhox4zZPXUPUcnSJ3lWRyeiMyAAfnhcl1oNHCzJN/fb\nvI59BdQJmHJ8ZcIVmPRzSVEYy9vaAiQ65ES7uMYcRIill1tZVGQvWaBBk8xD\ngHW/CqyOuSi261Z7IvgSA7kjBjT1lzxMMu16Tf8c6Z5fqEJUnOkg/RDbcs35\n+9beq8quSQK/NguZ4MwolHqELx6ptfVUbFSkqpJ5AFgAFQ0jEnqbJLiBGVVZ\nnbYPCeUF5s8F54yrQTdy9Q27LFguDmgdzOr8k3QJXwfLEw/KRvqLDbEbWeuM\nUuXP\r\n=NfKr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBzz8G6udagaCOowjNSJNjaRaQajPcLmRrZ68AS5PT91AiBDqlMt7lBSz31x14yPGGE+HYQrvuDP1ZTBhbOD3Nb0wA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.f8654c40.0_1590010854127_0.2257967707752968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-select","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.c67667e8e.0","@material/floating-label":"=7.0.0-canary.c67667e8e.0","@material/line-ripple":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/mwc-floating-label":"0.16.0-canary.05f3853e.0","@material/mwc-icon":"0.16.0-canary.05f3853e.0","@material/mwc-line-ripple":"0.16.0-canary.05f3853e.0","@material/mwc-menu":"0.16.0-canary.05f3853e.0","@material/mwc-notched-outline":"0.16.0-canary.05f3853e.0","@material/select":"=7.0.0-canary.c67667e8e.0","@material/theme":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HEvu9EhhfhCiXvtU3/er6FBSH9ai77Fwc3g/mAFptfGv2lK0QH6Im47/n/O6W09i/zE++B6jKcBq3OCaKd4yqw==","shasum":"401fb20715eb23850daef9108dcc93e276e66dc5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.05f3853e.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrt6CRA9TVsSAnZWagAAG/sP/0ENdTYvgA0CbSFqUol5\nh/vel2L1+/BE7ZBqvddUY3BsbPL7Ao6kxwUpAZwFhfBfcbqWAdpMJ223/ejx\nXJQtwoq87rmwwjUqNB1jt9e3JxBtOepMuahgN2URDeGAvhAcwcV1aYQVLnKF\nCmGj5KhK4Gtp+R8ow1hxPgH7FSJ3TEypBUGzp6V2Zv3gP3+9mA5Z3r2OYBQa\na6i6ZkmW0UpbmH3ZniCE8vnce89UNvS8UZM9H2RI66naXZpAYbJAYRR5S0fl\n7URy4IOGjJhdntQZ/5HnMPNL2UDTcPYD+BMfLHVpZmojS/KWjF/mw1IEgNZd\nWiTFYzieRmCW/tj/TGzmvyKSuv1utPnb7TrkwwAT/tjBe/OS1SJ0DJphOEsa\nudJTMrbXpKIYcHUyd1QPlgIJxXNij2bzj57l1puOsRJnSodiwrduOMBC3Ibt\nO3anRXFbK9pYMlPHkCy55Mh3jyhH1bRwVNtM1uQSOyrtoOeXK9QzGzto6b4v\ngq8hxgcGmi+BOU7DUuX1wUlp0RG4TLY+BAPDS1mhRGiysoE8+aKLmq+4o12M\nbqBJEYXNdbPpgXvOT6ufvZKh0Sw4CD0I7jS16ZWFYsLVzFT0sgEHRAFWrPWL\noas+GOjtUyxZ6p6k7NV9lHWX+sGjZvBi2SPM9Hi1N0geKlgaSfKzhBK9cDEa\nrPxM\r\n=NQD/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmLcXe2EpUw102acP6EksMORhCugD18ISO8r3SYfT5vAiB+K6aF/YR8oAmd5Nxjr5iLmETCEqmXvU1jFmJ5NND/Jg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.05f3853e.0_1590082425833_0.4108469283746625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-select","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.c67667e8e.0","@material/floating-label":"=7.0.0-canary.c67667e8e.0","@material/line-ripple":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/mwc-floating-label":"0.16.0-canary.5fe61f4e.0","@material/mwc-icon":"0.16.0-canary.5fe61f4e.0","@material/mwc-line-ripple":"0.16.0-canary.5fe61f4e.0","@material/mwc-menu":"0.16.0-canary.5fe61f4e.0","@material/mwc-notched-outline":"0.16.0-canary.5fe61f4e.0","@material/select":"=7.0.0-canary.c67667e8e.0","@material/theme":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-94RzBD2YppTkAQ4RfQAtdUZKGZqUl+7xQI1AZmC4P4zsdrHt/FtdZrz5qQmVwP4580AHZwZh3qsiLMB0lp2cyg==","shasum":"bca25308166efe6df56fb0d52bd8a9c84bb65df6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.5fe61f4e.0.tgz","fileCount":46,"unpackedSize":892940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwniCRA9TVsSAnZWagAAwpgP/jfrMyPHmjjj2z/4cO6Q\nRp8x4XVFj0SU/Rdv+N9nJe6wIX6FUtGs2pedqnpPm1CM5BVtF84FMTMfFoVE\n7h7aphR3YdEZF79ZBxyqMQnQiq2+v9wvUpA5OtkzMCDn7oiXFksdon9Ar7/W\nEwsC+5BZi1B0Mlfe4GeQyLV4I9T64V8PMUv7mDWR77Ke8TBf7PN0WYmCf8mq\nyWVzjkpm8ECh7cTuaqNAQV5HQh5EVLdhzZpLpDOb81jPxsa4NRAyNmWZxTmU\nRMDbWc8NIyUkcJJEbbOKPsulx1rAOgB/ALumN8R1Au6Eb5pIfitp4Zvlew+2\n6xzYdIczO1bSARdPuwg+FBI7DBpRvH3tZeG6vC6df1GsQQazxyPGNO96QS9h\nTzHTIddDgDQlnN186MT46WF4hV+lDIP4AV12/F6RM4k3L1EJ0gkGbuJfN9Ju\n3si5iTPXIhzMGVzQUCdrp16kS7ymNjk+bAXmH51REFFRlupZcVF7AM5zL1X6\nZ6SC/UGWApR2It6iQC8xl8SCcr0XTrl39FVpn4BvqbZt386+hF7uoLefjVWP\nZ0kgvLcZ/hV45u3scSIvL4bbgvjMQBj3bW7f0YcVJR6JbF9QuSOPnNJKu4Er\nEcsm6y7boLVGquSa+aRvqnQFOUZEzov0LysOYQ55sruZFgyhF5BXqqXfP7nb\nJZd4\r\n=lXWd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEau4B978EBMfUIwOSvF/LWfYTDOwNN/o6wDMoeH1fcwIhAIge9qwIgFPFyvEh5pjjUXCLIONDqerSpjbRajNZ/NUR"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.5fe61f4e.0_1590102498036_0.8409019189514162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-select","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.c113fc942.0","@material/floating-label":"=7.0.0-canary.c113fc942.0","@material/line-ripple":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.17d33745.0","@material/mwc-floating-label":"0.16.0-canary.17d33745.0","@material/mwc-icon":"0.16.0-canary.17d33745.0","@material/mwc-line-ripple":"0.16.0-canary.17d33745.0","@material/mwc-menu":"0.16.0-canary.17d33745.0","@material/mwc-notched-outline":"0.16.0-canary.17d33745.0","@material/select":"=7.0.0-canary.c113fc942.0","@material/theme":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-E1Hz8Ji1UqPrP9S2o4/212qC6globLmvmagnh1WglxIX3/Aqa1QfqyeWlXjS/EqtYX2bk2KhcU9u0Bh68Lkj6g==","shasum":"ef0d6ead6c2d4a0e9dbf8052dedd08d78c823992","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.17d33745.0.tgz","fileCount":46,"unpackedSize":892985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUBfCRA9TVsSAnZWagAAN04QAJKEx8YraIoqOXW1CmQ8\nZXLkZAKKurwUKcCZITeqCalXMcrC1+gR2I07kKHt10uVWjcKF/owjmsngbn0\nvXux/Z3CASzLa5ZL4tl0C4ncvGX3J36eqUcyigXvTWQ4fDKa+Gl81kSLsAcs\nrbz34quuqECj0h7lhxEVWM9lq+/MGCFdu+xewC0gifYZmupkM4kNyfzDLbL0\nqFCVPoPTm0hEyCwihX1qai5YwTQsg0BspNF5dUHjTUlMF8hA4AAM+1WR9/0C\n1ucpxK59SpHHB+aOxJ6CBkOsOfgLVELO5Tun8yeQdB258jcr5zE4wsXwAErH\n42ZhfH01JdE5cXngcdv/ZYfskX807552ifhO/HmQfYOaizYOLf/9KAPTZ+Wk\na/7TTdeXwPdlASdmdEqv7YKb6oHDqUqE81jkqkDXd2i6o2MZm7Z9nksVrRGG\n3ZO6FkKzpNIYkt0Fei3SXy4gP5S65TIpBPL/AQAQFBMV8/a6jO0RYb6vkwa5\nUq049g/jn9rs4+adCrz9sJPPfwvPVxTTd1ysgVkhjE4u59tr13o76JAe0Ks3\nVUsNUJ4XGZX2XiliqgNm4vd9NKnrLQ8yTceELWI2zTkp2Z9zZ+oC5+oeiLiZ\n1P+XjYyWY7474bTureG3N+7VxToJy63tXP2hk4U9dTNGSvF4zmT/Mql5gNY6\nUhvM\r\n=ORtO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdKneV9Spn39DiHACmswaAZ4d33lZoLG0pQBqYrKSvpAIhALP/KWXksvBSg6Grb2scGAool08R6xiwhjN8n+7IR4iI"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.17d33745.0_1590509662996_0.23033972652180434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-select","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.c113fc942.0","@material/floating-label":"=7.0.0-canary.c113fc942.0","@material/line-ripple":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/mwc-floating-label":"0.16.0-canary.e8b52f5b.0","@material/mwc-icon":"0.16.0-canary.e8b52f5b.0","@material/mwc-line-ripple":"0.16.0-canary.e8b52f5b.0","@material/mwc-menu":"0.16.0-canary.e8b52f5b.0","@material/mwc-notched-outline":"0.16.0-canary.e8b52f5b.0","@material/select":"=7.0.0-canary.c113fc942.0","@material/theme":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iR/1yW479Xml/kNz0kbL5WbNl30cbJgXe8ITioOn/uFudMIDnFiin/26/kSHtcpkBgSg0sKadDX7zPFt7ya68w==","shasum":"f6824ceae01a58d631e71a0147d8a179107efd0c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.e8b52f5b.0.tgz","fileCount":46,"unpackedSize":893162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWNNCRA9TVsSAnZWagAApM4P/3ireMYg9TDPWaEWHhYu\ngbb1rVmfGeLvHKdw/hqhaqkzJ+t6xNyRS3Nb5Jr+55qKB32ApFY2I6mx3gSI\nR8JhVxR5ZSVMDizbsdyc+3FChMZakLxjoSX9zqa1UgLYLGxppYcbheiOZsC8\n9/aRMUU4vR9TgzcRYGRwMRHi39MpOgsZdBLRryyqqR3tmhfrVWhW8McaulhP\ndGhFbDlmPoI2Fxu1vMZQumJ+ararFRhE3rUecQLlXp4nSJm/jI09kanTtd71\nnqtS08faHCcibxix0EkMaR3XIneZPRBd15guzBi1J7s9w5X5p+vc3ihsT6K6\n5OXQkPLuW95v7jUv9iPYtuD0FjVMscqxhGDgc8FG8+rt6NX/wyUJOQZKZFBy\n392LSewiCvfFkbZNC7H8WJU1tJlPj6VXBPctEO2tv6yGZb0benJAde2NDPFD\nP3bGI0jav2d5ErkPLyOnx459BO296cJDjTp3keMnsHYJM1hsR0Eo1cJJhJjz\nDqhrkFizMcyFwgOsHpKM74MhYd1AalQUU3dv72nXUxvp7CqUFUqbtbcxy4eq\nizvfl3JhIfM59lE1cR4N1If+8gp1llzpYtypdlS6Ldjx9Z8ebV3twuCex1nR\n0bQe5lmRcjVer5HIWr5/tQ50zjm6gKoInS0thRZ80PNhEDpjVS5Uzh4sEaNv\n2+cS\r\n=fYrm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk32i5Svc1iJZAZCsqzayw7yeMG4Fkjrjt/0orESXtIAIgQJbzu57cD5wmg8x5qVyM7ELOl7EQot/+Dgb//80lAj8="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.e8b52f5b.0_1590518605249_0.5985563288148736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-select","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.01de07011.0","@material/floating-label":"=7.0.0-canary.01de07011.0","@material/line-ripple":"=7.0.0-canary.01de07011.0","@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/mwc-floating-label":"0.16.0-canary.09afa0a9.0","@material/mwc-icon":"0.16.0-canary.09afa0a9.0","@material/mwc-line-ripple":"0.16.0-canary.09afa0a9.0","@material/mwc-menu":"0.16.0-canary.09afa0a9.0","@material/mwc-notched-outline":"0.16.0-canary.09afa0a9.0","@material/select":"=7.0.0-canary.01de07011.0","@material/theme":"=7.0.0-canary.01de07011.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8POc6cv/9/EW33UbzLv19O5y8FB8VCpO7u7lO5M+ci6NcAPurYY7wocM6bh1uuvvX4GD+W+BOhJ4xQMgjpXJAA==","shasum":"a1ec5224020879a46b89ae76c12cc9c661313cd3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.09afa0a9.0.tgz","fileCount":46,"unpackedSize":893486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY3GCRA9TVsSAnZWagAAlEoP/Rq9CnWorob6jBzzhEKY\ni5BPCuDnwRfiYTJZ5ljrqwUy4cfqJWGFR5E4Ilzg372QE5RtTkLdpXrsojwd\niQgaZNxnAdjOElvmTQ64E1VOorUa04hrJuBV8CyMCSOpBd0Kzwt+BLkgF0Gu\n28kFTZblKt3S+hCNREyhYNvmQPfIawpZqrhWP6pyDUu74HxZWKtU0Mh5FPVh\n+rNrH0uaARYAkBV+YWp+7WhMYwGQwIssLQ8t+WdfrRqQTVy6lOORHRgSDa2t\n8Ai7JxptqyxNb8aEGZQnRWSFtYVIYe46A3glYJxAv+xrLxkSXJxt4IrxaVEZ\n5aEG3NBr67XJVLxlW2CA5hgT5VnkKtWkSXDYsT65D9wAjsHk2DgYQa6ZCJ/t\nBC8LIsFl8/fKnxT48AuH08CtgcgyZGZbhLIDEVhTbafNVzgVNToDM31VELZX\n0C+UCXDN08VW7eCGJY8VEgndKSwLSuWMTsxr6VjhZpel6vlCJexYtCZxfeTL\nmKNeQNKen1q02w24EmChnUNOe0Ki6knyjFNi0nRG2LC3LacqbG4pRsikgfMN\n87mTn/Nv/nX7OgBD8bNuF8bkY9OimUiLH6wQJId92wsShUv/NjWbOb19BDyu\nsxlC6Y+lQQJ2XHtp8GeQPFIoOlGaIvXlTrSBBztGHx0XFHcoLfU1Gec5QDL6\n10M/\r\n=tuHf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAlsq3cTDij1yprf/e1pK4cqVLPg3Ur0ZK8keBAjSfdHAiEAzqHEXD2nutMPu1tDSmIrTD8pPUinJH7OMtBixp3gYM4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.09afa0a9.0_1590529477979_0.8527089995723545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-select","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/floating-label":"=7.0.0-canary.d91794c7e.0","@material/line-ripple":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/mwc-floating-label":"0.16.0-canary.58bc9166.0","@material/mwc-icon":"0.16.0-canary.58bc9166.0","@material/mwc-line-ripple":"0.16.0-canary.58bc9166.0","@material/mwc-menu":"0.16.0-canary.58bc9166.0","@material/mwc-notched-outline":"0.16.0-canary.58bc9166.0","@material/select":"=7.0.0-canary.d91794c7e.0","@material/theme":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qGSi/lQDIQ4DaDplOUc3TWpr1zbXm2hDhhKGOPRZTYrkGRxLaggQsoWp3yA/8vGfQdGB1Gegmvr5/YjiU8ZLow==","shasum":"1eb5d9d8e3448ce03bf1ad28200853ed2de69e1b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.58bc9166.0.tgz","fileCount":46,"unpackedSize":893486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbS6CRA9TVsSAnZWagAAgIcP/AsQQVkxKHLp3wVkDZjb\nSE9tZvRPztr3GXR3opy+MOa8po3blXfBCP1qXR7upGLF220hvlSNL4pqNP/X\nFWvzyEC1KPNYq9bb8Oc+eYTu7mkEqLEOkUCMY/RWQLXT4IGQ1Lv6cOKZoS5W\nkDXsMYv8ZE7ZmJmHRUH3mqmfmofow7NteMxFchOp/s9UQvOYEE2uijx6dqSV\nNzSXNaTQoV5zU98yslFh0jeVHC6b5Qbm1/5ztc9uZ6X8IcbJuV4JVE79tLLe\nUss647vVS0g+VIpAHwyHwZvTO7W/9rRSNiaST1bLlNHp7Ro3Gl7tdzXA5mAU\n/cM5jsaoEmRijShalfcFu+pH8KJbngBmoxl4SKYkXFG+C0eoHtL7a+MSo+IS\n7f2YkG9v8fMZhqUcm6iHxZxGR6aLrQwwafHU6Ot24wGoq3WS630qIm+wQdNL\n9DoBw0EAsjRxLrqccP9GeA2eY1kQ5dctoo5zp52E6ImcodPO6wXdrwTSM6x1\npo+HKMP9xsu7bsYVb6VMXaO1dMwDYSH/h7saSohBbauCmW/A2yWd74FfQgS5\nm0411WKjNxUccHjN7pfwQe8DGRXnwg7iZ91wvPtRxImZi29K4eqs6nZKj3xy\nEmCYeqJE2exyI3W8ewnfR3BRjYxfPj9wNHINoGSGzSF256xWAjMmEzdEr//Z\ntPXN\r\n=4ldJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE41zN/qw80smMxawHOKSH9EeJ/cihvy6B9uV7NcWHI0AiEA5k/l5+lc80xYSbS0yfcnnJwj33exdcPPxQ05woIZjxw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.58bc9166.0_1590539450466_0.7801423708217281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-select","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/floating-label":"=7.0.0-canary.d91794c7e.0","@material/line-ripple":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.43bde144.0","@material/mwc-floating-label":"0.16.0-canary.43bde144.0","@material/mwc-icon":"0.16.0-canary.43bde144.0","@material/mwc-line-ripple":"0.16.0-canary.43bde144.0","@material/mwc-menu":"0.16.0-canary.43bde144.0","@material/mwc-notched-outline":"0.16.0-canary.43bde144.0","@material/select":"=7.0.0-canary.d91794c7e.0","@material/theme":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TlRJukD5z2zYLeyT1CMtRhddgJH7pFMz7/bc8qfYvpDKDnJu4gqiQyjZMEnAd46wjxrjAzkvIEP9lmuXVKTeKQ==","shasum":"a789a11a52522852516f0850adda2daf403951b4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.43bde144.0.tgz","fileCount":46,"unpackedSize":893486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrGcCRA9TVsSAnZWagAACqcQAImGg8LwvJ+VZlQ3TRmv\nDz3ev91Ar1a8EIwEpLuID3iQz6hg32VLpV+riPusi2y/F1xDKw6yESz0T2pM\nRFnlq5O/0vW3Fet6tKkD5kb6Vn4LTQdgSh9kXIWadESsSaxVbX/tKO5dnFoH\n2/8Feyk0Fr32vL38YNU+EE0YU0nI8Goa+hWTkr1HMIL9nW/GUNJmUtM5+d7+\nTWhzXoMcRTNx0cMQp/qBCFBFCTh0d9zb9FBzQEZPe2c9pIqBuIaU/DzYeyic\nACq03ScGmATzebjYWUARdRi8Ml+Nm3hbrcdfTcrxnPOauKxWbCX+V/W/4h7h\n7y6jKWAvaHgA1+x4L/hB9lUwCrCLLKCwcS6LOpFrcfQM4PWBYKzqpkObGJTP\n7xpZjvYP25Rnt8VhsswRM3kR7ZZHX5VRogsa1JcfafdEBM32hireZv4xwF+k\n4qg9rRPRO6aXJVxeoY92bLxFqjUHYOxfSTB56lnDzjwOuyrV/sbGX7UXpwsG\np+98YxYw5kt1YNeNvGuOmX1y8mtOvroYOsoJJIPe0zgweh+st+6Y0fGSr5Z/\nU+8gbd2ZCTkGVefoRR6Fl6cvZ3FPpIFNhg1NNpF/S7bmzJLrendgz06/yMBl\nYpmiDP5dOFOE5r0RO9PitLldneQwWX66SLGxzf67scd6tgRRNsU5OjU/9Eic\nHuJB\r\n=Xwob\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsaQonjc2L22W/NjEF/2i3wQ1UGZKQJp/5Za7bw3ocrAiEAx6sLhMvFA54DBLuBY504f7bmBxR1UPJKKDj0cpI0SoI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.43bde144.0_1590604187581_0.9755287037262701"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-select","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/floating-label":"=7.0.0-canary.d91794c7e.0","@material/line-ripple":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/mwc-floating-label":"0.16.0-canary.51067bbc.0","@material/mwc-icon":"0.16.0-canary.51067bbc.0","@material/mwc-line-ripple":"0.16.0-canary.51067bbc.0","@material/mwc-menu":"0.16.0-canary.51067bbc.0","@material/mwc-notched-outline":"0.16.0-canary.51067bbc.0","@material/select":"=7.0.0-canary.d91794c7e.0","@material/theme":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TqnoKmd6aevd2h94NdGrnhuZguuspffeS6kOgE1Ct39TnzKCIMyUfG5IU7a3nav+aWregKKi8s4906cn2dtcdQ==","shasum":"53c9ab0de887e09c747bc0c38469300adc9fce36","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.51067bbc.0.tgz","fileCount":46,"unpackedSize":893486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsejCRA9TVsSAnZWagAA9sYP/A3ESOfwE3IFdVQEX3bR\nZAWUi9fPLHXIz3agSZbQcPJ0gm3KnPmu7F7WGHKVtGxD00hrS/IAFpL8v2Y4\nQ8zQYmeD4KbFZwbpYTnBAoztOLILYI3t15fViWho8p+6qqpA9jfpJ2R3QVjB\nfCooSGV5dhwNIx7Bnm9fU3NUFgdtwDy/5vmRDTDmkIW8sZempKlFztJ5y/RD\nn01Q8AmmStcn8wzHX8Cl7+ekVyqqM0VwjdqoEWJEx+LBoquJGfqGVq0NSv9A\n+pHjm6OTWBIVK7MgZpZOiQSEWZiWs6pJFZLgNpwpJmF7TDZNFxorKasB6u+0\n+0H40vpMNzMiDYMfnDqpGS4OnvRpwvjMVio20YRfw1udEiIab3DBRGEwCgNP\nUx5YC61klSdcCA5PIOWZKAeTVEOdAzblnCWjbv7DeH8DiBKEBfNNC8NirZJL\nxBhVJqYIRroaQ9z3OvBELop6zcKomvNOZ8QxdP3RQEMLdqLlrmfewWyPTUoK\nxPJaPr062ElBBActSdj7xPm6Lsa8qU/VvLUUpqL9tMWsdR/X+mXB2uLBXQ/0\ntzW+lvCIs90ZYFJ/SMFa0PpJrzEk7MQi9yARpinBtLld7uZatVK1k2Erj7un\nS0HqU9FNleERO2k+0udVVvrmabnh8wvP/gDUpe+Wb58WaTVuucafS4VDSiqE\nVAbj\r\n=4X4N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFeeWQ966q+/48+EZ2Ssah82/6kF8H7rUlAJ2TftMMbaAiEA1dokYhH62NjQZAGX1wzGDca7v4dqD+nvvF8d9olJd/Q="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.51067bbc.0_1590609827404_0.04542910573102743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-select","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/floating-label":"=7.0.0-canary.d91794c7e.0","@material/line-ripple":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/mwc-floating-label":"0.16.0-canary.92751ffa.0","@material/mwc-icon":"0.16.0-canary.92751ffa.0","@material/mwc-line-ripple":"0.16.0-canary.92751ffa.0","@material/mwc-menu":"0.16.0-canary.92751ffa.0","@material/mwc-notched-outline":"0.16.0-canary.92751ffa.0","@material/select":"=7.0.0-canary.d91794c7e.0","@material/theme":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vmMGqXacbQk5ctxvcN/83r1KRq0v3zvKewBEJ5k0lraRDZcmC5StnVO6kkdFu9HCssb0suiMEiNC1oqiZfF/tQ==","shasum":"2e899f87032ab4469465858274f48e80d489f137","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.92751ffa.0.tgz","fileCount":46,"unpackedSize":893482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt2CCRA9TVsSAnZWagAACaoP/2eIrCSuqdzFX7fhrYXQ\nq+zPCmpQ6CEJQwyJTR3HgMF47yi2i0GVzb0zHcuOpJOyrW+PcmtUe+QE2u3Z\nrWO8RhdV8yfj7FxV0R8Ob3roBtwYRUR6b5GxjaeAzoiSwoK/HI5itStNOkX+\nbyVsgbiK4DKgkEH1pqFdctLmgaaQIU/oWyvLvo8PYoqheBRLMkOlsoXxcXqt\n1iIoLCCAp/x/AGaKKymDk2JlT5RoB0C4wQS6oJvuEuC3tVf6aEdRvCyFlWAg\nmrehYDaGj36jGKSDqXWi9GtG6CPkthTJG6Pc6Bq/+8/wlGrKzCtrDENpIe9w\n0hU30BeGZRIGv+wlRsjRq7wYUZ39PQqr7IUkL6rSwE5Ey7IDjds399rqaP3C\neOMKYD28rpEqB8BCB3ehrcuW8vzF6pWu8agAbQQPmGaHOsjNOAwl/xr5RM2z\n12JMV0SVHfuEfQYygC1yzIWHS4gUTUi2TVGOhuXxUe6WX6X3qVfcLQ1arFd0\nZpAuziv3WhZbJHZYbjWJSsBvYIDTjY83TcDGmK0e5bwc7A0I1V5DMHV+FUtz\nby34A2DiO8NjqAdqaRjKlAYglM3rTU22b70kNwq+CDEWKJr1g9ZArOuxRfqc\nnWgUHXyXfcln6X64iV2mbearB7iPbjUyiLCMIVcBuVmJ4/VEp9FKV/tkA+cP\n/S9n\r\n=kJHK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFBJu/dSzdqFmTB0z7xszWWuQId2iiQY2F493AZ9carwIhAIXq+bcsDcqWtBmIbS0ovvt7+WVPTAs2lgyNSAL5HKH4"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.92751ffa.0_1590615425975_0.14226574703435246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-select","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/floating-label":"=7.0.0-canary.d91794c7e.0","@material/line-ripple":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/mwc-floating-label":"0.16.0-canary.aa2b40bb.0","@material/mwc-icon":"0.16.0-canary.aa2b40bb.0","@material/mwc-line-ripple":"0.16.0-canary.aa2b40bb.0","@material/mwc-menu":"0.16.0-canary.aa2b40bb.0","@material/mwc-notched-outline":"0.16.0-canary.aa2b40bb.0","@material/select":"=7.0.0-canary.d91794c7e.0","@material/theme":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8BeswiwKQPm6PdUjsUobLzswdQ3jEfwxbaa+wfSahBKjxQJRiLGNCcJsBSTjjVNEoxH1Oc/Hpm3lXOT8ebPVqw==","shasum":"32ff0919b85cbaafcbe957c6e027c5546cf83515","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.aa2b40bb.0.tgz","fileCount":46,"unpackedSize":893482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A3XCRA9TVsSAnZWagAApjQP/js20BnBRu2KFWOludU2\nQ6kZcgWSY/3D4jaZBPX5T8U4t+uVg9eCF6uq5r0qX0xvs7n8tamESdCuXIjv\nlJ3PPQJqmRVWbTenlUVfqvJ3YYarlJzpaUx6vx/J9xflcUp3NG1Lfb9rZ062\n+EA4MgsDputAsbxOFa7Iyo0Y3ZhKMYWi3dZ55vcRlv07YvhhagXUuNX/zZyg\nFS5QM8XyvDK7fdqhxU91PP2tZzMlSekRij8inUunTBdzHDWoMU3xkRkEitWA\nyh1a/1Tgw2LbW98Icbs1B+PHMil3mW7awnripL+COun5n7p1Nz6unP/RyOrQ\nxqkM8KTC/p+QPriez7CucQI8bWvIP5v2GPvHKai+MJOjeqFgr9gzBu3nZX0m\nogaAXwYqwm5bAPdzvmcuav3noEaEKpoZSRM6sOI/IfroEKTgUX/OUiIpsoeG\n6pNRi3xly/qeTYkpQJWFfURCY4yTDw21srY77jJyciBTIrWGn/jnrMTgFoC3\nRkKo4fLzol+rDLvIfu/F2wde88R15LAUzYdMwQiUw//l3L4BWASp9SkzLQ++\nOMiiwwFS4oOMC9ZUQ3/7Sn2M2/mUElkOtFEY19Bz/2WzPd/JVFz5nsG0Qle/\ni84xuvIwkL3SBFP5p2uWUOWeljBP3dEkOzz1/4MrJirmP9jDN08Ea85mIt5r\nFovy\r\n=gKiO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCC/XCJXT1Hl8QM5NjKvQemdZO2+iEUF2AWlREFdLRAAiEAqDtxuEgcyS0GIHHNO2gl0e7dCz3LnIBOfCAhFv9HMiU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.aa2b40bb.0_1590693334999_0.4128807966552541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-select","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d66d22bf9.0","@material/floating-label":"=7.0.0-canary.d66d22bf9.0","@material/line-ripple":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/mwc-floating-label":"0.16.0-canary.1a870a01.0","@material/mwc-icon":"0.16.0-canary.1a870a01.0","@material/mwc-line-ripple":"0.16.0-canary.1a870a01.0","@material/mwc-menu":"0.16.0-canary.1a870a01.0","@material/mwc-notched-outline":"0.16.0-canary.1a870a01.0","@material/select":"=7.0.0-canary.d66d22bf9.0","@material/theme":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4UfWZTxN+Xkwny7XNpild7qh8mJg0B2JA5qnOIVmKT+jgEZEVhCbFHpluJl4s3XJQj1i9B692wzGYy0pBVXAUg==","shasum":"becfee3066e0d8385368c7027abb83da3c1bbc1b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.1a870a01.0.tgz","fileCount":46,"unpackedSize":893914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CrLCRA9TVsSAnZWagAAv34QAJbLTouutBm31DhzgpG+\na5YvP6ywZHClLylrVVlsYtdDRGARj2YT9p58iXCYCevIdA9HdbmAD7QaWZw7\neW1km6cgRNokomaytso2Vj+59ff0GSvv9WRe340pX1JNIE/PE7wFZNYJijKQ\nfsR+37plNKpHjpJnyYDab5pemJMJw9MXYWCSQU2HH0SfO3tBLLPZ/F20h17t\nZT13oRbhKPWV+KAgwvFEt0N9LadEJ5P1skuN+K2Fw05oqSvcNS6hYQjg/4RV\nm/AOG09fXMpKySmhnt/HAl2C0uHr7sBEe3fX6ZvS3OlOKFf9w5X+pmCaokZ6\nj3rv30F/g9VF3WhfrQAVIJeEJrm7ekwqnRC5Cw1WuumYzVdzyH4Zmmda8xe/\ntnYQ4J5sa3Qjb7B4TKkOnPEfG1egJB3MVRYfjBuhf2cna/c2XkiKsfEAFJoT\nJiVoopN6PDblXIfH0LVguu4Ht4+CTM5nWk47V9LrUk0bE1KVZte30a0GGRKG\nggo/CA0tRpC6kwZEFIJyBkALo+ghr1ppfYZp6hUMv9NUsly/Wg0KlDnqaBfY\niTPTJmHeg7po8H+LUkhbfJqoUb462P0au/Q+8q36x6ZML3abnFBvvMdKPViN\nPUJAFOM/mxHgS1NPxxirjJcjZ+zf0gja3qeZrNyvFjdV6IgTs1rb6LqNber5\nB27x\r\n=6xou\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAs9vODxj9rNETRgaRMG5F1E06jZxjslU1vcaD6XVtjbAiEAs1rb1x6c00liyTc0inH5pQMZ/Nv4ADx6OElMjjqb4Eo="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.1a870a01.0_1590700746544_0.09795754750501562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-select","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d66d22bf9.0","@material/floating-label":"=7.0.0-canary.d66d22bf9.0","@material/line-ripple":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/mwc-floating-label":"0.16.0-canary.ad57d086.0","@material/mwc-icon":"0.16.0-canary.ad57d086.0","@material/mwc-line-ripple":"0.16.0-canary.ad57d086.0","@material/mwc-menu":"0.16.0-canary.ad57d086.0","@material/mwc-notched-outline":"0.16.0-canary.ad57d086.0","@material/select":"=7.0.0-canary.d66d22bf9.0","@material/theme":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cY5/KJPyJaM1XRZmQOKht76icpfCvTnEUmUsw3w+PsodDHHQ2L3H4iLQHckyfqApXz/2bOGtPogPLLWD5qt7qw==","shasum":"feb7ab51abb047f1a2e834830a902acdd038eb7b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.ad57d086.0.tgz","fileCount":46,"unpackedSize":893914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z+UCRA9TVsSAnZWagAA7UcP/iohqfj+PmStelaa2dnz\ndKOVTbhQmz2aMvvISADuORG1RFLzbORzMvDMosSqdC4CC3yiLsCHlH0DEgt9\nBNp/u1JTMVuJ5ZWsbRu7CsEiSn3SIDjuOznz+7fGx03fttJjnQ9Y2MZjnfsD\nlm0p+kHPhc36Z5Z5x7oug8d+WBbTjVJOp+FKSB0fIJ09RavSCdr2WQGmtG9Z\nvJyV5+buWL0f6CtZtiCfpAf5wdvDqtse58pJ+m1PAARxeWOFbkuD14k9/pnH\nppLI+D0TGSdRoEfbsJj03NCF5HW93A/H3zYwIPGCw7od4+55fNWXoUIjFZav\nOvEzFsO8NVMzLFeBznSDqPm2GK3GAwffNixv629AAd5GTeD/OuYftvTVAASi\nQUha+mJ0KNQFLeWPg/wrvCDplqdqC/07ME+tdwTkjVvIGcZVdvovgs4fJrCO\n1g0Tubla5ExpPyBc9tsS1YXcF7CaF7b/ybe+8AMZZm0DMX2/ac2o7t2xgon0\nuH1p3iaJNiK+eNw2kVv62+wglNQmN86XFek0p9BLW4c5Vrzh3LW+K8LMOZFp\nAtQt+gLMlMlG17I/NUcdwgx5yGFvx9MZyW5L7O6P9acKjfPHG10Bj/mUEK68\ne/6UYwOWMCtVUZGsolLQ9Nnlg/4gHXxd21OOP9TU40fwCctgc+6zyNTzRhZf\nJIaa\r\n=KbJa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk/7BTvHYVrGtZVNk0HyOiY3XP9hG6IeS2k62ihp1ywwIgd+8aE/Z/oXbZgZr0EQzkABbLNzhwHb9YEPxAL9rD7mg="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.ad57d086.0_1590796179607_0.31407891857381776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-select","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8073a20a9.0","@material/floating-label":"=7.0.0-canary.8073a20a9.0","@material/line-ripple":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/mwc-floating-label":"0.16.0-canary.3bf2b4d5.0","@material/mwc-icon":"0.16.0-canary.3bf2b4d5.0","@material/mwc-line-ripple":"0.16.0-canary.3bf2b4d5.0","@material/mwc-menu":"0.16.0-canary.3bf2b4d5.0","@material/mwc-notched-outline":"0.16.0-canary.3bf2b4d5.0","@material/select":"=7.0.0-canary.8073a20a9.0","@material/theme":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-52Pn9yqpT6oUtAPysMuVwUz+8oaWn1ki0VVV+G1Wp2ECDhwmckl2wOPSJrW/5rdXcASqAKVgwJ2rOzCf5H7pqw==","shasum":"00b9a70c357f93a1c6c77ae9d59c09743f3d5c73","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":46,"unpackedSize":896236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aq6CRA9TVsSAnZWagAAArAP/2aNrxZnlFjWSPDNW+/w\n53zol0V920Mc09h2133hACNicwnMeX6vW4JlpbCyunw1yJel6Mb298/HOVZf\nJV5Lu1NLKKCV9Wu03Z9xyx0WxC58fmwEjHTs+BNeBblGMZ+saar0FZxu89Yl\nqeUugAysW7khKmdQbPqil3HQuCNdI39ZKElGZi9QuFXBZrdIwdJgmkwkAq4/\nuLtJaosCx0NF0aOvObJvIiInvsCjhyGD42CWT5ShveEIFnXGqGUe6Ddxjtbc\njI5ysLoFZ6LTySr3VKqnV7jhK7nqDVvBRL1UpBFqeWhBf058j30aUXsDemtX\nhI/jXOdw0yb2LBz19vzfmScirnOXJ65aG/nMNjLgTp/hl4H5u04n/HaCX3fL\n3ygM4e/9MDeTZlFsqhRHeLmYDXUrRo4GWi2+ZSLJ47eVq8GEZ1efblSPCH73\nwMmXoGhRIyAx7beScH+PguKSiYO0uH7udaRerGRjsGBdj6u5AaNNbKubGenb\nDBNorSrYeeMVMs2+aAzgS8njDIRRGEqx4wDD8gw2L3U6bQ9XPyuArBRkjM15\nQeo8zMXrDLLMk2Upisd+pQn7wZkscz1DTf1VST4uVmY2en7cLVfe9/yL63Ub\n+1ElK3FGxqS+9gRtB2Vdl/zMPD0pu10yseuCb7SqsSHZGRaNsT4kZlJrhexs\nUsb3\r\n=a3G5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw1hqWkVpg97qrcAv4jMyApc5DD0FoIaKjFK349DHVogIhAKwbDP9UgrcbiD1ViNr921d64sxoZERnh15yvXZhb5jF"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.3bf2b4d5.0_1590799034031_0.9266423236786239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-select","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8073a20a9.0","@material/floating-label":"=7.0.0-canary.8073a20a9.0","@material/line-ripple":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/mwc-floating-label":"0.16.0-canary.ac05f090.0","@material/mwc-icon":"0.16.0-canary.ac05f090.0","@material/mwc-line-ripple":"0.16.0-canary.ac05f090.0","@material/mwc-menu":"0.16.0-canary.ac05f090.0","@material/mwc-notched-outline":"0.16.0-canary.ac05f090.0","@material/select":"=7.0.0-canary.8073a20a9.0","@material/theme":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PO07zly7UFt6BShUWmpQDG5RiIkwaRPewLKukLAZJNL+YCHUpsJB4gHrtabpe+KkiaXpzqa1QbBYhyzvtS2yLw==","shasum":"a72a718b4d5791c131f3818ddfc3d00fefae896e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.ac05f090.0.tgz","fileCount":46,"unpackedSize":896236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cntCRA9TVsSAnZWagAAuCcQAJHdstC9rmQnZ+lp/BuQ\ntksOYi57IL4Yl5ks+CgLtxzqnZ3RduSsir1zZySwdMLz9BAREeK8xxftw+8O\nyOTi9B7IF7GWUIWwwBefne3rTDThLQ6oZpmzsCz6ScQgpLdUSoDXooDrPFJC\ni7Ga99DwrlUKcnOSYWO5G8Ibl8gIWxHyCFGrUgqG1a5lN+P12+Py9vg8gAb6\nPwXrHeB/eAR8Qz6VQ9Ped7bS2mO+WkS0+zbXtsEKX7gqF4F3veDOSUzSEC3v\n15GPqfHwHyishrizCxOeIpn3l/Kc/EYtMsvptvEit3xrwrUOzGluaJW29DE5\n0cy00qBEzH0i/ZjNyWWVdpac5lJiY4soYSJmYqfOAeNivNw4yE4QT0/et22e\n9dYBOhqPtDiF+P+8OvjZtnuBaHCYE2fDk5yZgdjVkGaPs4bKVzddrDLj9RXv\nhYfWW3RltBqDM12boi3FgjlOPFvJheClIH7UswRkooaRFuHJiGzBmuaEyxB6\n0KwGSrZ2xsQZLDdORcaEB3FzKB/OyUzFLPTUSpyBEmOczP3I29dhuo+8bMlX\nMJ2zYL4eS9ZQXVpM00NFp+5okRnnQVX2b6LMt1wn0/tAc/b8Wu+zOyJuyJYa\ngcTwQyaSVixVrQOYGc+zL49d2mjIfPUCAkMOn5Xxtja1GqGVCGZTTrQo/GQ4\nqaEo\r\n=mNjl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5RlPnDQsKaFt5v348NpHhZMyyzYyxHJMZ+Zz4iOvG9QIhAKFNTXZINjBlonY8VUb+O2/N7x6TH7ej5OLc7XvtMa1b"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.ac05f090.0_1590807020561_0.14772781496241327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-select","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8073a20a9.0","@material/floating-label":"=7.0.0-canary.8073a20a9.0","@material/line-ripple":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/mwc-floating-label":"0.16.0-canary.0ba7b095.0","@material/mwc-icon":"0.16.0-canary.0ba7b095.0","@material/mwc-line-ripple":"0.16.0-canary.0ba7b095.0","@material/mwc-menu":"0.16.0-canary.0ba7b095.0","@material/mwc-notched-outline":"0.16.0-canary.0ba7b095.0","@material/select":"=7.0.0-canary.8073a20a9.0","@material/theme":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-d1nYVSsR2npkc5Cj3YiZXPy7OBLjT7Ei4o+lV4QkWO4tFDt1i34v/1r9ELFU/MlpiTV/VhraWxLHw1qSEKNTcw==","shasum":"c8286f89b46d16d829e9f2e1c915bce3687a5cf1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.0ba7b095.0.tgz","fileCount":46,"unpackedSize":896236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ct7CRA9TVsSAnZWagAAQBgP/jx5/R+grZuitySGwPqv\nPkNUG5xBTLNoe9+Oib0jLP55Xw1BhLlhjpfCIvexdY1dEhFMborScwVzvWEF\nZpviwJ16CIJvj3Fe9d9G9f08kxRhePpvEP1v6+eaYpSu4NNNcb/ogmPVQuRK\n0sQGEnKP0HWmN04m5h26lIWUb3P9CcCy1Uju9ORpzataYx63yLmJNgLOW7cF\nt26txyXKdCu7uX5q59I5T24BdxokLAkdFDWZOyTm3A7l1Owg5CNwZlp/3RvO\neSmZiJCPzL2r877U0kIdik+LsMuuedz+XL9LaC0xJ0y+5Aerbn1T2lZBBnLS\n0Xzw4bFaU3xhMT/Rqa3zvatdDrnOH56RIl0kDlHLPytQVhrVwhKV8g7Br1k0\nR1h/0Gap5nZOaqbxCXrCIj/+qDglZjMFeepbES8W6IyyRIoL4a/EAEFoDgeK\nRu/LcVsPjhwWNdjqfSm4ZYZkDC6EGsNb4bdll1FZ/LB2LDqb+SSW+SfiMxXc\nb2d3igt7blI+mMRNmWk/hjUcJU71A4nXIoH+Q3FIIvtyKD9gbFqbQ+gz3opT\nSF5ly+7KJ5arbm4oqLQ4pzm6xXMBo55zh+JNhZKBzttdzWfBqxr/f2lCo+WS\nBPYQnuX43XNrlk18eRJrd14IaGE8FPS1Wte5rg/r1d6mi4nOv5TWekz87O2z\nv96j\r\n=MFZ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbQNWARBED7AaLo3r2pFAn8HAWRqo0cwxDu0E2GXUkuAiB9pxoDbee5OPrPW34UgDBSZUK2ZZ6dZo2oCokbG0yTOw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.0ba7b095.0_1590807419154_0.8157719144034346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-select","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-select.js","module":"mwc-select.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/floating-label":"=7.0.0-canary.b9776b1d0.0","@material/line-ripple":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/mwc-floating-label":"0.16.0-canary.5eaa9bac.0","@material/mwc-icon":"0.16.0-canary.5eaa9bac.0","@material/mwc-line-ripple":"0.16.0-canary.5eaa9bac.0","@material/mwc-menu":"0.16.0-canary.5eaa9bac.0","@material/mwc-notched-outline":"0.16.0-canary.5eaa9bac.0","@material/select":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","_id":"@material/mwc-select@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Zqtbut9FM6S36A78Of6Lc7VCn/SDlReLtlb0f/IJ9PudExB0QBm7YwK6AEu1d7eXiIONptq+hEDoCSUe0DoUFA==","shasum":"cb066299f1dd6b9fb7bdba9bb149b6bea49f4a11","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.5eaa9bac.0.tgz","fileCount":46,"unpackedSize":896695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y9VCRA9TVsSAnZWagAAUt8P/19pg8R5RWj1TKJJZbUT\nlH8dtrN8QiLiT2W2KTQR3FFsJdKjeVgF0JKiAN/wX5n6YtihsZ5bQeHyqI3f\nA2EgStyLCh1rwWSvDuxZHjzKWhATMRY0VumrKNvWK9sbIsZ6AUhO9QmhI2pK\n1xNUBiumEGzUvWFFy9A3s1m5I5Qb1xB5fbvLSX0eZvgS853IKPKcHDYV8xuB\nyRnM8sY2AifYRejJLcw71lYtZKutle5farZvYfa7j3PTB6TI2g4Hyk2JmD1H\nyaEFc/I3AVZK5NepvDutzF5KJz314VgkwvKGEYWzCZQgQP9MB8vJpPwMfCy4\n7+4OkjK9JWq6ssf3YJXEf2funR8FPYkrXIetcQPhas3hrngpmZzZaGGPRNhR\nDSeYJYmjzGchwFQBxyey6yZAo80464/fuhbxc7jIkKKC2ukXoTZ/kFEvqPLP\nILTZnMod+zYlbGRvY6tXAoAaL5lE5sGINWIGCC98RnJyBKSy9Ga45OqideIn\n4b0TPsafAIcR80UyZxqxgzF+rtTMN+ZNrRIbunnoO+UAMVKgwe/Ek76RrUKl\nKPF8NpYEB0zFWijUs5unNAokgEntlRwbT3lWNnwb9fKWcxj6SpopBZAEf0nI\n0vhFVUtvtLueNOeAR+ibjVXXeMwdgEC8csX1YTdMeNiom8bLeIBMysVdMLJU\nQI2R\r\n=yu4D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFH9DDd30bA3YxNXqVamBJEhU2juLW4Va0mnPdUzylZgIgJDR4xVWKXWMU/9R2nQwM730OYsdYfvgTRpNutdGarfI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.5eaa9bac.0_1591054165190_0.6973179854695282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-select","version":"0.16.0-canary.5677ac20.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.b9776b1d0.0","@material/line-ripple":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/mwc-floating-label":"0.16.0-canary.5677ac20.0","@material/mwc-icon":"0.16.0-canary.5677ac20.0","@material/mwc-line-ripple":"0.16.0-canary.5677ac20.0","@material/mwc-list":"0.16.0-canary.5677ac20.0","@material/mwc-menu":"0.16.0-canary.5677ac20.0","@material/mwc-notched-outline":"0.16.0-canary.5677ac20.0","@material/select":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AxaXqo6IQr7mQXG8Figdh5bEO9kjvavDBKXd3PBCrys0cBgfm7YR6YS+TqdsrNLnGGYZRovSjGI3plgrQdZ8sw==","shasum":"02111af12fdc9f50f616a9b79fd790b7263ce092","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.5677ac20.0.tgz","fileCount":46,"unpackedSize":896916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZX8CRA9TVsSAnZWagAAsWUP/2Lem/CQ8UCld7A3VnFl\nKKkK1ccY13J6S1cXwDNF9WnD3Cb0IPvWR03wX8jw9GLSbDz4mlA+svr3yurJ\n8kfH4FmzdLEm0WuP5CCigIwVQHxPskXgxoKZWm9h9UyuA9wpoZZgqN6/gqtm\nl26mhvDUAU/eKOa2CAXgpL2WhPkUW+PUY5sjLC6YpUo0giGlOhfutnjOvutG\nFn95e6oD1ODps9YUHV35En83amMKWhtGUA7IMC9oCSAYxlkrXGBRo4/lc6y/\nnu4k1TNwPCg4R1bt+gggd0hR5wRFURjnElbrQSyLTDpZHI25EI0pP4/XdaYD\nUGNiEtDSMjTVSsn4Xq2PtH4uUE8j//csTrNYMD6PpQ2uVggfYm8W4xHdcEkX\nH0BZj6wF6oe1ebN4egP15jRYD0nsiYQmIE5pd3pwOjzoUm3evqqW+4qfLrtl\n3hLByFZUVtgjdg/fLqvm2YqtqKAA0KzMY+feHgxCHOQaXP/QA9KBi9DovOV4\nEwF6c6yQ2qt8Pmi2SlcTZl/A12s7nAFl+Otti5jr6J1F/ngpz1bg5QcwKTCl\nNCbSPznI4QOhSfR8yg9V7JRP2J6MOEiX4gPyAk1Zs44BIq07flSBt4Q36sgd\nVOnqkNNp7EJn02v2ZLjSixKVpZXe/D7vv/tPjHyNhptO3cMI2xfgM1o1AsSf\nJPrM\r\n=hFhk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFp0AHRPKnpISefsM5PMa14zN238LL1S2eab54GUBWbpAiEAvtJmutoXc4eZzejho6xNylf/rw5XyS0g8RwCExnKL4U="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.5677ac20.0_1591055868206_0.7676592755018015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-select","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.b9776b1d0.0","@material/line-ripple":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/mwc-floating-label":"0.16.0-canary.7ac6bff4.0","@material/mwc-icon":"0.16.0-canary.7ac6bff4.0","@material/mwc-line-ripple":"0.16.0-canary.7ac6bff4.0","@material/mwc-list":"0.16.0-canary.7ac6bff4.0","@material/mwc-menu":"0.16.0-canary.7ac6bff4.0","@material/mwc-notched-outline":"0.16.0-canary.7ac6bff4.0","@material/select":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zb8vSNaiahGc/ZWGLioq14r7dBKUa5g8Dz59Y+Sgv94yqmTQojxKnIVdfL6OgykU6wa1fYILomGvY6MAW3yJ+g==","shasum":"e38b9027e2079f0a65c833cd5f1155efe8597ae9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.7ac6bff4.0.tgz","fileCount":46,"unpackedSize":896916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZpKCRA9TVsSAnZWagAAj8IQAJ+HC/SBa4R2/ngsQrTS\n4A30wpCNPEZq2SBndiPw5UiGILWGMh9sfN+RHB8jAzb0ChAsbjeCBbyO/8Tq\nLvqfteUKxi/CvboLFiJtw9fxLI6yVSTLubQUYqW4rYFGexnO5kKJQqBGOVtM\n+jtRAE/twmfjzrXlQrcITSKYPoNZaL5JswMbduUsED6aFiTYR+VlozCC4P0/\n6sXZmK7Sj0+2/g9aqnwz9mhcbzvnM9lrkzPr58k13n8s9TkfL+4Z/3GDE2VZ\nOiJ042m49vqD+Kpq7+EXTjL6ly6lxPQCdSg7mQPIdgF6Hq6TFxUsbdRRWpge\nxTQHBL7/Pvu+LZJQWWsFOFhbh4WESArQ0qBX5KSTz2BxJPEQYcQJrA+rXfUa\nB0Jy60u060oTjdjNhtcKlyVhAmDbUiOL5hlxMp0h6i0mAzwO0QLquY/zDH9O\nnpOban8rW5zWyFRnTMymaLkaiXNI0xCIjkENXOPxCv2p7BuxI/11tYE++jl2\nvhKVHlGh4sz9HyQTmvC+/WLFUoPVJygodRnI93rUJVU0iKrZYxJ7nCFC2grI\nuTgRnzivClN8BOTtGYN2lL1iDswCI0/Vm2eFlmg3SxAS38+1zRvLf3pb+xdk\nYxoe66Iu5XlOXUvPiWulwycqWqTqN/cL1bBOixU6/cwnOVZH8975V76Yy+0s\npGXg\r\n=ay1R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChuTohSBlSAbqUsIpKbfiG1xz/2e1W2Pu517PYL4BqSwIgF8G+CrjJcpha0dJF8gPbj2to1NrLB3pd/r3nIQkACxw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.7ac6bff4.0_1591056969312_0.40737165826759836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-select","version":"0.16.0-canary.d45622aa.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.b9776b1d0.0","@material/line-ripple":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/mwc-floating-label":"0.16.0-canary.d45622aa.0","@material/mwc-icon":"0.16.0-canary.d45622aa.0","@material/mwc-line-ripple":"0.16.0-canary.d45622aa.0","@material/mwc-list":"0.16.0-canary.d45622aa.0","@material/mwc-menu":"0.16.0-canary.d45622aa.0","@material/mwc-notched-outline":"0.16.0-canary.d45622aa.0","@material/select":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-S6anWBk5V1mvBodKSh2HIJRPQEZTtYdxZA2WlMZqP3oSNMam46uoDt066b0B4eogf4OvcGTibT1hvIwq8Vop5g==","shasum":"3ff476a24bc1927ad79af9218a90f0b7ddbec3f1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.d45622aa.0.tgz","fileCount":46,"unpackedSize":896916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uTRCRA9TVsSAnZWagAAbCEP/2R9z2dn04iUNJIL3Q7F\nj7uG4ROWPZtMO0Ft6jzUJc5hW3+lQf0d5aN6xd0MMq2GwfjLkREOOPtq7rqb\nswHexaMJjEPDYlw+ZkXPqwGg0X2NyruSYYnmTuxXzhW4HfcHAiOAB08Pb1eI\nmO6HdoqC5pU4Mfmirka3tMESUuY3zZdLtFh3D9SpPIl/ef7Ds/6ZeRd+e7h/\nsZJevBoXSFZooaADZHi7kAmNGUpn3IHcM3Fbyp7T3w8EkhX70Xk0D6dFlNEk\nAs4e8weFPdSbZ6uR9JMKfPRHTtAf1npGKFdBedtx79bhYG3hVAbHP+oeX4Yx\ndnLJx8KgNn+GVFPNszIVqoUaAymeIysi5bSmi4IBpr8cdBQYaZzOOUXdmZGY\nBTSZOuSG1TTw+H7fLAiWdw0Hmyt/huRLse8dDeiNvQXBOvlDma2OjK6ZRNVf\nnZw5gEOvxsBy3Vt6mN9DlGkEoi0BZxj+zmHarCuOkqVXLAMvWyD9vFoEXLfp\n/6flkiwEYM7ucBYJPM4oyTgoeOQ6SsRYvB19xYEJ1EvGOr3yX9W5tdBmHQgc\nPyW9nPv1QqEZKTrB3oFNeIFL4EfbCTW+brL3S9kbwTnILcA+SM/gvxwHnJ9g\nSPOHyj0/wyt4bEnPdUrLuKQRklc2gTjdL+USeApmgVOLpYI/RAR1WAaweDjX\nl7BO\r\n=vws9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoqh89dpW0o92GvGKOgpwiC+h0v8zkRG3YSbSWRuQSKwIgIROub69jq19iYJ332XjwlVNhlI2XWkgr9fCipvJ6UY0="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.d45622aa.0_1591141585111_0.8690166530852617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-select","version":"0.16.0-canary.dc26c709.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.a0dc2b5c4.0","@material/line-ripple":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/mwc-floating-label":"0.16.0-canary.dc26c709.0","@material/mwc-icon":"0.16.0-canary.dc26c709.0","@material/mwc-line-ripple":"0.16.0-canary.dc26c709.0","@material/mwc-list":"0.16.0-canary.dc26c709.0","@material/mwc-menu":"0.16.0-canary.dc26c709.0","@material/mwc-notched-outline":"0.16.0-canary.dc26c709.0","@material/select":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vGzAz0CcRYuh0x8ank4tG1fNmW+5KsnhgI2KHQUSkVIvHzENZhiDitOQbOx3Am990FNHQFAPkzxfsLwX5IKalQ==","shasum":"da9ac284fcd6210095ed98d56a6f381232439aab","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.dc26c709.0.tgz","fileCount":46,"unpackedSize":900742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qlLCRA9TVsSAnZWagAAorwQAI8EYcwl9DaHkBbDuCfn\n+p7pLfKhUpds2s/qoK6S+n/yHZ0wS1625+5LjTe/LONFn/suDs/Dlt8z0EFV\nMnVbzYRsGY+Z3wleEqqegL5JnLC3cFJ+9Tg/fRb0T/HmAb7mE7w6VEVld4+W\nHIHdRtCFGfI58gBc+a2alVXyeyog1X8zd4q3Ej/xAxOHR95CclMWY8qiQIRm\n/1kvF+tuW4L30zZy8ebBievmctT9u6yvfDLVDL8n65aSHkPSCnvj8MBDIduV\nFqJCdTyQMFS05W4B21dhDA1RkR7mRaOtLkY1ObY9ST5UDZISxTw3pi5xGhDC\nwK3fWc2xU12DBsmI0lBUwELBytY86pj/+WOZl3hiapQZFZ/Jmv8Fm11TD0IH\n3/3Qgk7vQQp/PG9lmYZvRlozxQW+hDG63g42xEBNOBijdOo0hrj2BBBVMiAN\nlLqqk5MqhgdJqsaWKgnvlaq+eUWiduwm5lHac0lpAOEYFr6pujM36RwTFaom\nDg/HNGnk9I1XoZ6qysIs28BDYSYRs9qP2X3qigox0rcelblM48YwnIXT89e8\n74HHae0qHZB1JLU4Jv9E3dkFAoO7THzTywB/wF43yog9Q4DHiAtCI0vBc6V0\nGSFFQHMcGc2t2VtSvNYkcORyawWSR6EnCVGwnj0fqiBs+vRZR8whroh1zA3N\nUqX7\r\n=ZTSz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6OdvTZopWnuKZvmoQIESzmF5iEeYyGDFJX4pg4CWxdAiEAv02iBvbWsShjeOzWsCp7ZkzlluKM2a3R9Jldrszs1J8="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.dc26c709.0_1591388491216_0.3731679945638564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-select","version":"0.16.0-canary.b9baf6db.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.a0dc2b5c4.0","@material/line-ripple":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/mwc-floating-label":"0.16.0-canary.b9baf6db.0","@material/mwc-icon":"0.16.0-canary.b9baf6db.0","@material/mwc-line-ripple":"0.16.0-canary.b9baf6db.0","@material/mwc-list":"0.16.0-canary.b9baf6db.0","@material/mwc-menu":"0.16.0-canary.b9baf6db.0","@material/mwc-notched-outline":"0.16.0-canary.b9baf6db.0","@material/select":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uNn6aP57wrMby1+uFJghtYRr66v7YYRF4vRYVSPU7fStVVXs3kE2EBQKAMjJ8H0CBm77z3jNIipKB9rX8MtG8A==","shasum":"df201ebd30df80224671dcca5c7b729c4a902983","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.b9baf6db.0.tgz","fileCount":46,"unpackedSize":900742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmjCRA9TVsSAnZWagAAmJkP/R3dRRzqJD7F0ZNvHmIT\nrG+Xb4XY5BmVurhUXOSo3kzNpfFQLTG1nzqiWFfQ8qxqIm6XTn8o2bejKHAX\nAlJZbEMbgxkQL+XT2toUdZ2dhwF36w9HVQG4Wl328upQxhzY7rEkgYZEc880\npT3fBsI55NWmcEu9JQZfSJYgClM/K7Z4Gf8cMwTWhRaKGdOkq1ujCo6cry5u\ntkp5hCoiLpSfFw5Z2trXdYrxGUl6PBFYZAq5a6gqyNOE5O9aKwoDZB3WXBok\n8FgOQ1OSV3KBgci5KSj22A2CcO3YsetiwKV/y58++zpBO0J2MY6IfMZyqjhz\nf+J6QXRTAMAu7pe01AfRy1xjjL9LvLPkZZgQp70nwF4ast9Z37ROzxNFkpwW\n8FpzzU+3Bmnyr3nXYDS0u4719lHMMMdULfKzayLvZJ04EEzJVn/jQfwxeYZj\nDcL4xjkWJ5KZd1C9efa5DXIQPRCrY1sc0xtwR3sihaz4y/EPkFLTMLWSBGFW\nNJfl9cP/lKm/tYGGWQqxw41xwZby/E6mJj6jEG5RUYGSMED/2+XQJlp+xtro\nauHkOUHvCWtrGqvJM98qt5tFsgbcy1mSbe1NgTifohlEQZD534vFVTmp6sz2\nQHI8vjQer8AbvqRx88qS/TVZGrWoWbkZg7/gOfTK4zARjMta/1bZl0wAnTRl\ncP1L\r\n=i3XD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgMHqeKThMnrj7W+ww/BS1NDHHdclV2Tbz3tfVmGIUjAiEA7VBODakSes4j4T3hiDLaOUaQ1k151BxldGHmFP5E9ZI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.b9baf6db.0_1591388579441_0.9854236677847947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-select","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.a0dc2b5c4.0","@material/line-ripple":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/mwc-floating-label":"0.16.0-canary.e0b8c9d0.0","@material/mwc-icon":"0.16.0-canary.e0b8c9d0.0","@material/mwc-line-ripple":"0.16.0-canary.e0b8c9d0.0","@material/mwc-list":"0.16.0-canary.e0b8c9d0.0","@material/mwc-menu":"0.16.0-canary.e0b8c9d0.0","@material/mwc-notched-outline":"0.16.0-canary.e0b8c9d0.0","@material/select":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-22cP5qFPY8rpLbV+YGXoaIbqI5A1dFkibrkcAUNhKFWr4a19XzTNkzRDuv/PsJoK1XI9oKp3a9c1WJ8LZu03ug==","shasum":"d14d3ec847e9049bb712bb8ac161e295a55c93fa","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":46,"unpackedSize":900742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+2CRA9TVsSAnZWagAAu0kQAI+zSzGSOW0+JOnvTXzY\nWZgEN6L14AFIW/gLQrYjDA979yFu/MQoMnmbt91oGFKmBCWWZzNcE0qNYgvF\n40EN5U8YzrspDAU50ISe/XrMWNWExJyi+YAwuszOHq9/pfd5SqX4uKcl23td\nyHIyLDjiT2yLCVtOiGqPw3AMWeItqIuA5IMRB9NOu8pUUkl52IiOgAZDcJkA\ncPkEgOQf6f5bEhLIYa6AIxVbpkZf7c9FbwHabUajuLVZVCyApx0oOn+BDDeZ\n10AmjYzrSPGDcG9Ts9JnQyDcoIkClo5LkIBFqpWPo93Lu2uXAUgQk5zxbOYw\n1n7MQIW5t2G7yieO3AAzlD/m0aNGorJYUoavCvxykr5wQeJccxqPJ/t5uujY\noac+tSZr4ZuT8UAd6Toj5pkfMrEmEE3OIn92ZCflELmRwYCpvNyfloX9N77S\nJDYGQ1Cgi2BGBtMkJQ/OJy8cv+P1wQI4B35zaYi+sMM1kIkQmAWW0/cgIKuv\nISWLoe1GtUa5ockayA7xwptv7bPROHMsJuYtLmCRs2ZguNkREIy0qU25fNjm\nhc8HOvyffbwPsy3Mg3bRKMvvqo3OwheizpGI2ghDyPjiGB7IpsdINfnB4PoI\nZpPExFlrnW2H9kaaNqfovxNKgodt0ZYATsfWxP3N642tjM79gvbdm+0flPgz\nUlOg\r\n=nl7i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDZcqCElLe6HZUCQc5RE3yu5l3T8IIjYBalJLpzRfUpAiA80w6WJI+hPdlWxrB/QHxPxnc4QST+QOm/KrzIZN1PfQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.e0b8c9d0.0_1591398326307_0.4744845477915325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-select","version":"0.16.0-canary.51552859.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.39e6f71e2.0","@material/line-ripple":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.51552859.0","@material/mwc-floating-label":"0.16.0-canary.51552859.0","@material/mwc-icon":"0.16.0-canary.51552859.0","@material/mwc-line-ripple":"0.16.0-canary.51552859.0","@material/mwc-list":"0.16.0-canary.51552859.0","@material/mwc-menu":"0.16.0-canary.51552859.0","@material/mwc-notched-outline":"0.16.0-canary.51552859.0","@material/select":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-f+hGMEWKOwEQM1WQwtQEAQWkf/t8FgaYaaINXmAvQiYCFhZG8SPR5/q5MmN9yHnEBW31yQDMLFjLDvRuKreazw==","shasum":"4c4fe381704c1d24f4b0afa30bc101e8426748bc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.51552859.0.tgz","fileCount":46,"unpackedSize":904951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CSJCRA9TVsSAnZWagAAGkIQAIocKOfC6i/C1cynQv/L\nWa4x/plC6SCwfDKo+U2I4C/1J2sLCFr2ea9+kKY6Buj8ZOiwWyFqsRWLkeqM\nhyAvGabLLvd5Q/nBBZa7Q1UvSvcEYM+CMu/8r/q4bgYxUhY2UdhmwPY9ulGu\n34UD2zoItuFeIfG0UQdLpAfFfzzYvCpMxroOuekhboxicDgqsxJx5oYem8aw\nUe2Fgd8mQSjXTJNEb6LlgomaSSx45tKVebL8u7FfWQXha2J5ogOCci2gnZn/\nFcfWPBZsimHwb5a/sLX4vAEbPmiaXXeJAYvRDDjVc/GO2zt4rPVNJ51Lj7Lz\nk/fyTrMwx0kr8V0810Vvi1QZQRT1h8WSbZzOHNTp9iXvpkc3SMxtjQM9Nn60\ndnuwNqqJtHSawPC38BNlO7vgmxiMkeUZBWYQL7fa7KfAbfod+v5qDx8H0/cz\nmkVMejOvwjv3eY8ksc1HDTeowgSbDP/l1Y2IrwicC7pErjKU3xfNICL1G83Q\nEAoEmfMA3dEqbD7xkBf7zKXutYeYPe7Hl+qcw2mFHyXItAiYzfqUlW38bl8N\n38r26k/husE86bp1wTtTEXYuBYFwmjR+/uluNe37oC3sWMU6NTILA02JUhLr\n5C34mwENj/hsqi0CiqkNhhe44YhmsOEBcVFZT1uLcPWqFoGmaybnP4pIjhcC\nBgMU\r\n=ptAB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqQm7vEYixz9fpzsc2/cf/0bOCWShRSDW7hKfs8iAO1AIhAJnM6Xk2dhbJTHzHaLfvtQqNVGcmzsaVMl38BllVsB4Q"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.51552859.0_1591747721298_0.8105797391305305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-select","version":"0.16.0-canary.2e269285.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.39e6f71e2.0","@material/line-ripple":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.2e269285.0","@material/mwc-floating-label":"0.16.0-canary.2e269285.0","@material/mwc-icon":"0.16.0-canary.2e269285.0","@material/mwc-line-ripple":"0.16.0-canary.2e269285.0","@material/mwc-list":"0.16.0-canary.2e269285.0","@material/mwc-menu":"0.16.0-canary.2e269285.0","@material/mwc-notched-outline":"0.16.0-canary.2e269285.0","@material/select":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+0Q6yYKlXcSbWBNGj3S0LxtrORUNWnpQ9T8MaVwUZX+FAz5nmYL4ZP0tppQgXcj/HIrBCiomEe0hRh1KGhnMhA==","shasum":"cdd9f1f1090689dce9dabb9e7ccf59dce2efba79","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.2e269285.0.tgz","fileCount":46,"unpackedSize":904951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DkMCRA9TVsSAnZWagAAwGIP/Rw6nnrgdkuNJ+3BwcwU\nwn/HottjO+QtOUZXYCsnqNVu01bjxsBIRTVe5XZIbbaLioAgwpYMVC1M73MJ\nz8sWNh9WwhiRy/FJvYp9+YMGJ13Hz46HBDuskXwSAd5RqPDLnsP8O3CQmpq8\nzvxXr9D8F6bxxl/ZrN8gYnHUqNTbuaRcUwuoG7DhHDTpvjEAcFvSHD5CNcYP\n7Baw22jUDsKkFX1YDcHcM300NnvHkXbaeo0orMMp/UzeknBkj62vWVyA8o4D\nmnXlM0CYy75dZr7LuUgVAlmIX51Zjfv2dhOQuhqiQmDxdtaW07HGP/7oCmYg\nxVXeuiF8BrCABj2wYy0wYMkdAcOgzG8mjgnNrwUf+cKjycAesNN4NCxGyLWZ\nvs7aSh3YxaluGRnTUHMEL52i25nSQTqDiOIcRfSG4UBPb5zM/ChIdSTiio9X\nI72mZRKzgDA8HNqYIuuSIH1eET4NjMMlU1g2evCgrH4GKqkBdWXBkzXsKezK\n9t3IXZA+OkgHr4F+JSS5JowOpP16/mMENPaCrJes0psG9FWItotZM22q4nwR\n6cQ3D3y5O0iQX7MnUmbPOKYXnwpLCDJGnosleyo0YRqUcZ1KMmRVtJk4DY+s\nSQsdX1/1xJwWWT356SHlgyOtC+havyyJHgdpij0z3Hgn3BLElZu/zBiHfese\n3xCF\r\n=57xJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqbxflRx/TCZ6NGV05sJ+hqWtmafYCFOMn2xuCv8bZ1AiEAkpxO1BOFZ7zrB+lvYIKnq1AZop0FBdGnnsiqYncq4Gs="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.2e269285.0_1591752972428_0.49336301361547696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-select","version":"0.16.0-canary.be138b01.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.39e6f71e2.0","@material/line-ripple":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.be138b01.0","@material/mwc-floating-label":"0.16.0-canary.be138b01.0","@material/mwc-icon":"0.16.0-canary.be138b01.0","@material/mwc-line-ripple":"0.16.0-canary.be138b01.0","@material/mwc-list":"0.16.0-canary.be138b01.0","@material/mwc-menu":"0.16.0-canary.be138b01.0","@material/mwc-notched-outline":"0.16.0-canary.be138b01.0","@material/select":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aMj3jOip+eU9vQXZHzG+iszw43BdDmvq1Sc6wla42Nj6yL/BZod+khS5z1KBMuwl0X2C7hK9oe98t3fJtzy3mA==","shasum":"1084af8eaf934f8b640132bc0c14d8e433291618","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.be138b01.0.tgz","fileCount":46,"unpackedSize":904951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdkCRA9TVsSAnZWagAACRAP/0lSrF+8NF3dLnj67Iu1\nTxjxY9ekb+4PbiJvqJflAQjmsOYo9gp5fPQjFtCQN9sXKy+iBcfUNcgnpjgE\nr0Xpi79+sJQQBC2QfaeJwvtQzEEv257cEzCoRs0Y9YKxeofzpgJe7R5ow922\nfRRzfgfkZRRJ1X9f8VVP+lCEYu1wx3dbFDEArvop6F5JKFJCX3D2H7C5NnK3\ntJ9JiClcb95+MPuxBcYezjzfjZMA/UYSoJzdTu0CaipUAPmaccxmqhzj/Bsh\nACfz0rDBjWJzMsFp19PJRTqJ92q6iz1IvARF+AuS29BQW77xTcjZshtURwQ9\nRmfh4kDRVFAQm8srw5Ku+HpeTBpyAHrAOHE2c7b2KwNvn8WLCRmNMqxqoLYF\nK7NenhDuVS4cbSaFOwXUw6a96P7NIDZyoJFKvBoYOIyvx2hq6XfZDw4CEJlw\nAukzBQMzJT1VZr85unXWv9QovNFnJYKKHu9qbSWOozrKhMSs+9g2RjmD2irD\nEJ9+f3p3QPqj68bWzAG4D6Wv6nVSQA6QenLSBYjbbIuIJQnuma1QiHQcb716\n6z0m5VbjrO6CRHhKLdBR3D548tgi0I6Um7mO58+C5g2bot9SpzL0Z6RVCfvX\nLUOAxE334SD9qR4pZh3Vu0DafidkGPGvYyiXhRT8XdYwofJxgtN1KYVx7hMi\nnVym\r\n=xmD7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcxiTTpA80Lv/OpPDjIOeNViYcWphMaYc50yw30JdW9wIhANTiUsck8V581FLq0aVaQs/C7mOrB5zDNeWoz8NpuTuO"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.be138b01.0_1591822180200_0.8236586876117422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-select","version":"0.16.0-canary.04bccf5a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.a6ac8f629.0","@material/line-ripple":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/mwc-floating-label":"0.16.0-canary.04bccf5a.0","@material/mwc-icon":"0.16.0-canary.04bccf5a.0","@material/mwc-line-ripple":"0.16.0-canary.04bccf5a.0","@material/mwc-list":"0.16.0-canary.04bccf5a.0","@material/mwc-menu":"0.16.0-canary.04bccf5a.0","@material/mwc-notched-outline":"0.16.0-canary.04bccf5a.0","@material/select":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-P2HQpfIDeCXPoBLahZODIXKfiqzWClHkhPTA322owrFkTHU/nTjELRrIn/kOvQS4QFbdFdBBLkN2unoRhNVRmA==","shasum":"fc83b3b2bec052e8cf7468f5dc9ebbbe108c7fa1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.04bccf5a.0.tgz","fileCount":46,"unpackedSize":904951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BmACRA9TVsSAnZWagAAlpAP/1Ivj3ZcjTtKqullYrRK\naBfWhGXGQN0mSC5wMU4L2E+rR1UtRJrntFRXZBAWogtK+mnTvDjTLw+QQXgS\nb0vwD4ng7WNBmtl8uvkGdqvWDejybqZo26RLY2C3X+UFKNZ+G3p96wb0c7ID\nZDvqrw3zf/OXD6LnKQ2fNgj1hQyb3c3dPGWs83V+h4XjSEdYfs//ARYUYSIk\noZ0BwyPkMXbn/B3MhXzNVL0j1TxyaojFTDSw/5ibQD5xZEHZRjfcxU4BUssV\nWtytM+h9UIhm8fpmjJ1sv3mYgB4iWsqvqTkaTiCh77Smlxt4LSQaHzkngSVh\nG/ilvI9CMQENkyRXN2oYOY7VIBGMLpae6C301Wyorexl2fgozSPcd6BKe95j\n40tE2Hl5NY2p8T5KCxZvm1hlBg+idYy0E2QMICzjSMV2+PMj3jMQWs+UdOwi\nlKWiVdlMrZINwoPrC6gMdjjb4ZAfMNpwyPc9wSMdODDuKH0tO2FebkRQmFVn\nWPoi0Jg4lVexgq0kjt0YI4f+AbDl/fw0lITKVyaKKDPQCWXXqLEXjvjNbwQG\npxn6jvvlCQN6xLfrFFxoZmMnH053V/xPZdUTEgGSOgcHlvbnDR2xZkJA6Xcr\n0wga7WvHcSFD+5JhsvDpREXPaVqt931GyGVNTJssVIHzyEEKwLSa7Uvf92CW\n0p8B\r\n=lX4t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBE6PT7z5VUGuF1CcBfSe4G8L6l8N0nDGUObhRimAIZQAiEAj+Zne0w/COErxK2yopM1Cy4+2wM/Py+RYpjY7T+b5fA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.04bccf5a.0_1592269183671_0.8581382052525122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-select","version":"0.16.0-canary.b44dea36.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.a6ac8f629.0","@material/line-ripple":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/mwc-floating-label":"0.16.0-canary.b44dea36.0","@material/mwc-icon":"0.16.0-canary.b44dea36.0","@material/mwc-line-ripple":"0.16.0-canary.b44dea36.0","@material/mwc-list":"0.16.0-canary.b44dea36.0","@material/mwc-menu":"0.16.0-canary.b44dea36.0","@material/mwc-notched-outline":"0.16.0-canary.b44dea36.0","@material/select":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MtV6SD2B7TNMW0PxHtvMO6wQYkbuJyuLC1kGLJQxuImDEshqAqt69MO6vETYLTI/zidd3vXDUFaYrz7XOymVZQ==","shasum":"89a6b80da0a8bc602fd5056b2e83456bcff04813","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.b44dea36.0.tgz","fileCount":46,"unpackedSize":906037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJzCRA9TVsSAnZWagAAIzIP/3kLCQ2fQalugIdEFuew\nulDwQGlNLAeugxCQFsa+5HWmI83xqvabnq0x5jbrGw0eDEXMTb+zTA4wmZIl\nAf4IKCV7KxCNZDbnUAgVbKkQdl1h67HyIbREHrnLJxV0FjG30WaoFZbmVihL\nC6wTLHpTp5ITz/yJP/IoS8zKdONfc6vtUxk5YeqZEYkvuRbFxa54ctHkq4lA\nVDgyJixfzkz0pQDyIx+LubzzbczBZ3QLDzyldBMR/9GMUgvGrj8eEUPM2IKX\nPrvxwWt08N1DxLduTjWhCTt/mCO7lGXCZ38m2vSlGdq6VY9sfTC6b9hF8tEl\ndOm5C+uvlFjS1QlCygqICGsrpAPrU5WXQtFKE8SUo44Wk6BgYwUYznutqKUU\nlOBESuhC1+HkqcwqXpAQ+PGqJw/a2I2e1V+8DyBemf/gBkyQ/Am3cOgg8cuy\nnzbIHLbh5ur6hvN1nzYyfcOBN0XpFs04BWrMrs9gXPfG0U0Npyu8u1yj/yi7\ni4iAROHyCpSJ2Lj38FfFaYlcmEPHxPgX0AExFB+fwAXqVZNnffKgZu8eW+kG\n/H2mmzd9+JQIuw6pzm/fDV3GoCMZQHh4cWUu5UCM/7+5PllwA0UjMCvvSRl9\n73WJ18mwPsAWgDXAVTl9UH+v6Bc4XGVrExKsokEXCyZhgJLnULzm41Fr3Hb3\nyPjN\r\n=56L+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEe8nqfhXzHBlxDYgnbIVik5Zu7moGMx6ChGzcfTxDehAiEAgRvUChSAtFDDxaqtuyQJpcVGCFlxedtiiLHZbPC9qSc="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.b44dea36.0_1592341106930_0.35255038550097684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-select","version":"0.16.0-canary.e2577e87.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.a6ac8f629.0","@material/line-ripple":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/mwc-floating-label":"0.16.0-canary.e2577e87.0","@material/mwc-icon":"0.16.0-canary.e2577e87.0","@material/mwc-line-ripple":"0.16.0-canary.e2577e87.0","@material/mwc-list":"0.16.0-canary.e2577e87.0","@material/mwc-menu":"0.16.0-canary.e2577e87.0","@material/mwc-notched-outline":"0.16.0-canary.e2577e87.0","@material/select":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1usxfkViv2VWs/KULTdal9I/TIVp9S826hAsi79zejh3pyt7i4ZCHaR1YGpCVefuKbEM3X6MDlISbnISjcHbOA==","shasum":"f69eaa92088aa6b62f00f6bdc21d058595e52d9c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.e2577e87.0.tgz","fileCount":46,"unpackedSize":906037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TT4CRA9TVsSAnZWagAAOu8QAIw5yYKKMsYaNz/nxXWA\nLHaDF1WWATViB2TkGzePtVpDnvWJvzg9M4evba0qpFPtlVSx9LcYGcb8vVak\nLlgRoUkw/7Ys1UYxu3JVwMy2ViB8vtaE4mQ45fpklqg7eHnGokY4JXcT44Ex\nLHN0ZpDN/asAP6bBW/4OColJZ+pBiHYE0HPL0MlusPnp+NivGC8zNbfHyEqh\n4UjawxLxaeOD/h1Vhvury/oYW01pvv9n/O+ZQexKl/fwnEn6E1HSYFpNb23H\n/lzwgfJOhP/ER9YfpCCaUVxAiPcNO9JXHUbKcIoqTRpQONRR+WqVDUw6MsFq\n06+2lqmt56hDCGYikgdPDjsZVnMp4mcDivdZGsL6Pvday3At2c52U2eIFIv9\nxb71CAkcYmUQZB2gOLG2dhl4cHynwybmPN11RHYSFR2IBZwGPpVzW4EIqG/e\noQixqt2n9FUC0i/n1eka0rzZk4NvG6lw8PiLAARkAYNfCYaK1aGzxDN8nr8u\nZVc1uVT+VxJAcYEHc8AgG4heghNHW0k8qfxJFrAxBssICG3bMeNwSrkZbhEv\n6EygVMSRxXOAkrLuZFoOKpLlHQbbC++9WqOEhB3YRqYwfkhyTOFkiOxKHtdC\nAZ8G6iwmkAUTRHry1QyptSG+BR59RPI4RTbn5zMBx1Nn6nNuM8bFyQ/CFVRc\nL7nw\r\n=GDah\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDiC3dPUwXl9c5BPA9W35WsY6xuj1z4bpRaOc6R4ot3rAiEAu/dvYKqIq9kzaFLSM5lvh/t5EsToPX9KdYyx+YSAIOk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.e2577e87.0_1592341751526_0.29900748009051803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-select","version":"0.16.0-canary.58b73343.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.3aa33998e.0","@material/line-ripple":"=7.0.0-canary.3aa33998e.0","@material/mwc-base":"0.16.0-canary.58b73343.0","@material/mwc-floating-label":"0.16.0-canary.58b73343.0","@material/mwc-icon":"0.16.0-canary.58b73343.0","@material/mwc-line-ripple":"0.16.0-canary.58b73343.0","@material/mwc-list":"0.16.0-canary.58b73343.0","@material/mwc-menu":"0.16.0-canary.58b73343.0","@material/mwc-notched-outline":"0.16.0-canary.58b73343.0","@material/select":"=7.0.0-canary.3aa33998e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-x8xeChDl0ZsMWkiMxB3yWKIiG9qbdoTZuk/M4wsBSSRt8N+JiE+5B/69xUpkygIxZmjg8+OMpkinQpoBYGpYtQ==","shasum":"8c51c06b50dc6b02f09de55856831cd4f0414e04","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.58b73343.0.tgz","fileCount":46,"unpackedSize":906520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Th7CRA9TVsSAnZWagAAiLsP/1PYj6l/ARtMg420I3zA\ncAM3XvLcl0KP/t3DpoXGIKLbuAl/Y9hrjNm4TmZwO04HXhNWxy6iLP54j0TI\nNzm9bDFI0TJzAsIheF92fSIdpjvpmpcDQ4qcK84Wp46dvksAZwhYyblU1T7N\nDh26ACzc/tR1D2pYY2JWOK8RUjk6+sJ/60sdp/WE+BPS7Mrpdij3LzMABT0l\n8TYbAvYOaPSOHtpfhozrHA0uyVA7me7lJzkGe16eIrh9Ki9uXTYm4gAT1Wl1\nHZseUe/IQy153vKRalNC7qoR4yss9sWWpTakCP0yDjrFkT+Lr2ECme+r7mCS\n42oZo3XYqg8QTq6WDnu1357jPE3rRjn1GbPosP6IsX3UTMsFfS8In13/FDi7\n9zE2roJYUCfpmKp3uMYOw+zmb5z8CuIU7iDtB6KOuNAkHFLhw/i1wIKHXyk1\nQssVQ4vcUoVUEvn1kl3jlVXreMAKddY/jaDQbxj3clEn8UC6yE+AlJS/YMxv\nmFx+pCcQUby4eAU8B3uH5NYNPPmuE8U5i/esENn+w9Ue0SHrhICEI90WBP33\ndWxD0esed47YSUNp33aqVGr8sEFe1i0U1ISHwpMca/MsrOECq0QIDXveThMP\n0ZlumYJ9RndZbwL3S70l3evcwoYmiRDsCR4LNJsyd8jFllCT1jp9Jfkbcpb7\nGBO2\r\n=+Lqk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGv2V5kOkz0yKzOzdPM8A6lmx6tkM+wYeH2bBuq7A+wiAiBnIQYy/ZYzKBTCrGIsOtSgqiGWgTieNN2hb5BbNWUmjw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.58b73343.0_1592342651073_0.2557102923032948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-select","version":"0.16.0-canary.f155c058.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.f2a488e95.0","@material/line-ripple":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.f155c058.0","@material/mwc-floating-label":"0.16.0-canary.f155c058.0","@material/mwc-icon":"0.16.0-canary.f155c058.0","@material/mwc-line-ripple":"0.16.0-canary.f155c058.0","@material/mwc-list":"0.16.0-canary.f155c058.0","@material/mwc-menu":"0.16.0-canary.f155c058.0","@material/mwc-notched-outline":"0.16.0-canary.f155c058.0","@material/select":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6UE6J55rtjCohk8vCk2s8WTpIsWViCAX0h0CZrRK8jaYg7TS5cow9mD5km5BpvFUZHhnaPkfBSHcd86rIowx/w==","shasum":"2924b69b1772813082ae498e74c5b7062add25bf","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.f155c058.0.tgz","fileCount":46,"unpackedSize":906520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe662WCRA9TVsSAnZWagAA7MEP/0bcIgtrROmqc/XyscY5\n9wHaMrr0FfoVA158A8xHiCscykfrDw8MaXD2EzbyluPrbfSZSIHpc52Fd77c\nOb1YiK74f9Ye9OEQHqMpVD+KZKQhYSfbFBLJbFMb8xXfK326Arda5PAjJz/m\nBT5EN31rwN7aG4SM4MdVo0gqeknr6DDUdGRS401VmSYtcni2UIy1XgikPUj6\nfwdhNi6K2M0e+k9GoBpURGlT95GZFgQltGKrqXDLjkXRSQDRgSBxNHzgMoJ1\nJVASU0nAykmL1vF2CKEJKc5bqmW2tu2QPnUz91rG48qnyrnWH3UD652U1ZDJ\nqm3iMwntB9L4x9O83yOk0ot+4bndX8P3DyALN9/PcTHtOg1KvNhoGAe/xiFZ\nFS7jgMFBLgrp9WO3VEFjVWzicbdgWQ1kaNeILl0avuyLCXXJ/9Omyq52oe16\nIIm5J4aESZmxKWPnAm2LlpZ1j3sBMYraYSxcP3ZNzep06hIFMRGaNzLq22wY\n873pSuyB8Vpt6LpBvkPE+lzfzcIJ67rX4woWRizeGz90DRAvdQJDd4UPa2Lb\nArEc6RjZDI718UQK+N/wq+gFbHMdmRCYvs+45v78jMQ2r0Q0dXPTybDdO5Rx\ng5180Q2aXNX4kplDbxpvYo/u5GTCPu+BDXgIEosCR+31NL0ylETIyPVw3cDf\nRuS2\r\n=2AEr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGhDVPRwuGYmAM8MsR1rm7cts4iTlOUqeJrLDzWSsFqAiEA+6HZpIe/SBmsuoFw12nmPqf2XNY6GuSh8RWPbG3VHhs="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.f155c058.0_1592503701601_0.8704605864865702"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-select","version":"0.16.0-canary.309779d2.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.f2a488e95.0","@material/line-ripple":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.309779d2.0","@material/mwc-floating-label":"0.16.0-canary.309779d2.0","@material/mwc-icon":"0.16.0-canary.309779d2.0","@material/mwc-line-ripple":"0.16.0-canary.309779d2.0","@material/mwc-list":"0.16.0-canary.309779d2.0","@material/mwc-menu":"0.16.0-canary.309779d2.0","@material/mwc-notched-outline":"0.16.0-canary.309779d2.0","@material/select":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-PspCqIH1PI3iJ+omPG0RwCRDKkQkQUqn2SQk3l901BewFyXULfYVnMP9A0kdiXvcgT0Z/R42M69XwZK5cBbang==","shasum":"5196834cb71f9048df5a428fd519ac3b0558cbc7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.309779d2.0.tgz","fileCount":46,"unpackedSize":919150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6//MCRA9TVsSAnZWagAA3EQQAKAHVNdLrgMcC3eAzShd\n/1ttV6EDv8ZihClaeHayzL6T/cYgxH07IA7by/VHulNuW0/MCzlSI5XSD9uZ\n8+5aSwBqkmLzdV1cL40NIZJkw1QM1IShTK4GpqQHwqkddytzRuVsSPWFqrzG\n5prpHSiwUPQLHDWm6zL8ByVqeljgYCCaY+38HSjct4flxd+QA/lXmQ9SZH3g\nVb+e5CTb5TjgTU0xGDxsEci/t+PzBqLNsvMzPguqpSGVZpRRoirXmR4oVJPN\nXC93xDJeRWGOo2JJLr7bjPw1c5SLnHno9OvtG4n3IXg2E4Vl93vL7Q9rsObG\nAJeQLz4TNxgEKxQFDNWvPGZgA6rcERvikLTrmbdksoExDxav2T5No5dTN+Rs\nESLG5WnGdpF4Lxwhd+zMvA88beYZ+9EorqeainRN3B2Em577GWHp3LAkIdDI\ndr8LKsoWjIgoDyhv3zBG4tzQcV1guAO+H8U0jElaslVJuGd33Oi8jVHSBxFG\nIu5uqppHGi5PPDPmgAzgH9fcSpUNG8UPq0yNzjDH+2JgyUdRSsbhbfnJ166r\nzJ2vjyDo5rvBQlLgw1JmvO1jBTuuwiVqV2nkxcBWnB4COIwRpzdyZ9eR6A2n\n6+w6Dzh1a4ZtLUqvjIMhCDY0CXZ29DhK//o1VdpL8O8GZ6HvBMZBrFhN0JCG\nsBUd\r\n=IPvw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9l76qsOV4BpXY/3tMHENXpKHru4oRvuheICcoiWbCRAIhAM5B4tFZimADoR4f7h1yipl1NtM9ndR/pwJjPoPEaNs2"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.309779d2.0_1592524747968_0.06288067003259834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-select","version":"0.16.0-canary.e7649968.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.f2a488e95.0","@material/line-ripple":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.e7649968.0","@material/mwc-floating-label":"0.16.0-canary.e7649968.0","@material/mwc-icon":"0.16.0-canary.e7649968.0","@material/mwc-line-ripple":"0.16.0-canary.e7649968.0","@material/mwc-list":"0.16.0-canary.e7649968.0","@material/mwc-menu":"0.16.0-canary.e7649968.0","@material/mwc-notched-outline":"0.16.0-canary.e7649968.0","@material/select":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OuUm7eV3N+QA8wJsI3ReP1qVkXzhhmy7qsXmqoyuaq/1sT29ThmnAQyRFZILaHNi6DCcQWMeOjex/7Gibx2VuA==","shasum":"8b0ec04bd610ec72dc2d93982e1d0a0e8d76b17c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.e7649968.0.tgz","fileCount":46,"unpackedSize":920863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TD7CRA9TVsSAnZWagAAppMP/RHYM8kCh/FGS/7vo4SC\nEnKrrkhzeEfTY/MHpJhjpSucyYwjukHjNgzqjtON2gz8peieo9Gljqspb2+o\n5n0fYFWjWrPXMV6dcwUc3CbITQ8r3hTfaB3d1nHgNskeWcJtqLLc9LqlRDFB\n2HCoRs2/mNk9FONRkP6E7raS4qYp43ANEaen03Kp9rEr/i/doc/TzkU2aULf\nLvS/kwrZsIIZWxRvrhRtF5ZhCxBMd2cHKgoegYve0WLL8RK9iy7JcF1nuWCM\nNXL7raQiaFO8Jl2wjwtd++kGKzeKngxL3FgWVPICZxeqA2hXX+dt4UnhZKe9\nFfLmsVBOanZXNDJw45OVOO9HST/UM2ybCaUGcY4XOmBH4jgCk5QEme0yopjd\nx2j/rxnQq9KVaPI/LZdCYHBj76wMBXBoKBns36syDbJZrdWZ+MiWbg8BC1/h\nC+1S+A0TCDjbCkzjHFOuCx8WhcbVA1NGhEuVkl45PPp8rYX5UEviZ9L29qCA\nnE381kKzpOSdkHT5v4dP0gdRr/lu+ds5E/WRv4NoTm0lGkr+p5qD66+IuXlk\nNHd4ffx2OquRApmVeMsGybqCX66UFlVByvu+lQsBYOu+AdTywwnK4iTyxxeZ\nRcX7TsEidLG6S0Wcc2F5t/sWvekoaUVjZGgc+0O5yyKu6NAqsAkVdp/zmlZD\nXkY1\r\n=tTzs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxKtvzf8G3g8KacutUc4oLAV3y5GScZBU2018pkFOCiQIgNvkVek5fHC9E8FmD6nOttX/NzXDLgaoMWYVHlgpmHWo="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.e7649968.0_1592602874454_0.24093290587032357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-select","version":"0.16.0-canary.8e21c78b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.f2a488e95.0","@material/line-ripple":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/mwc-floating-label":"0.16.0-canary.8e21c78b.0","@material/mwc-icon":"0.16.0-canary.8e21c78b.0","@material/mwc-line-ripple":"0.16.0-canary.8e21c78b.0","@material/mwc-list":"0.16.0-canary.8e21c78b.0","@material/mwc-menu":"0.16.0-canary.8e21c78b.0","@material/mwc-notched-outline":"0.16.0-canary.8e21c78b.0","@material/select":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tJfOytG/77ADQdosjavOD95iHSDOi8tPJ+Zk4h9aHlsjqW/Z3CPu9aPAf0OHM+PZtc7MgsVO6rgq9HEVV88rQg==","shasum":"7026071ff4dbdc7f525698c21e9fcc6113c44602","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.8e21c78b.0.tgz","fileCount":46,"unpackedSize":926958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8IodCRA9TVsSAnZWagAAIRkP/j3TyHo44/UK0QqvfM50\nv5wMQ5wYbRTpFbRS4PDdkLSKWPmyWWnFA/HgaRax8yZW+ozjqZLm8XQI/KZk\nCPNuIibKjYj8sYK7AeflsD5jdm7r9Raysnem3fXo6k/i9Cqjd/bZp5d4XE0w\nnnrxK7ZsUPTg0ULB4KJLX2p7fX0nZOvAsffL1GUrslMgGmtzUsS+n0B6cTtI\nE0eoZxpwf7TDurzssGZlp4qAAGtmUonpP7Q4HsXjcZEdq0SV0eNTLH1MSFxf\nznwFuS2pxUoFbat6K6cIH35nx2AqjzxQoeK7UudDZ4ppEttklKYQDhtvMGqA\nvgYPqvTtSZpAqWEVHAOehHCuGcGeKOWKUHyZuRJYYq0g24n9Qb4GBzZOVqw0\nzR7QPsG8h1WBTRyU/kQpOBfn+rAsWWEDoK7XyElLGZVnVXIrImXHjs9IgDby\nuFONW7CotjSWRiGPVp4mteWPKt4efAkUqOvc9WEvSo/p89/D2WFkbQ+nn0R8\nKY5uEEFXpR7Q+RRdvAZHq4KwJFM+uy3HAqXMx3twXySmrzwfTrM7zaCqUrWM\nmVRFHfona3fBvtGpjBj68lhiI23Nq5f5CXf/fdftcNcBoECLnFfPP4i0rIhI\nWqz0jr9nlnINfnStTPyHTMWvO6sOJoXxSnfPYYNUOtLrGUvSA0ZGknu5ajP1\n8MoQ\r\n=QO9d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwAlraDqDz7h2Zj5yDYS2WpDwDo5aBbtYzDczFsBQylgIhAIcwgeqOXO6o5aneoBq5buNaZUMBxa0WRevqB//gpyLL"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.8e21c78b.0_1592822301540_0.9381260066701174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-select","version":"0.16.0-canary.6db76faf.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.f2a488e95.0","@material/line-ripple":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/mwc-floating-label":"0.16.0-canary.6db76faf.0","@material/mwc-icon":"0.16.0-canary.6db76faf.0","@material/mwc-line-ripple":"0.16.0-canary.6db76faf.0","@material/mwc-list":"0.16.0-canary.6db76faf.0","@material/mwc-menu":"0.16.0-canary.6db76faf.0","@material/mwc-notched-outline":"0.16.0-canary.6db76faf.0","@material/select":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-NA9tXUnikZir1PjgOfmBbIvNryMRpQG7JeoV789PNod0PY18KzWGIyKvVgBTxZ54S9QS+EEhUTAEGiCu6+UjnA==","shasum":"d4a7bfa63fb6de67d1b91600c45acf8c01b7cdd4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.6db76faf.0.tgz","fileCount":46,"unpackedSize":926544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7rCRA9TVsSAnZWagAAT2gP+wapbYXNPou/uNxob2qF\nAJUhCv6CazqSHjo+z+t7vUuL72QhTwQgc3Z1VDuCogAKdv5gVjhdWI0N/Han\nnhNPCD5jDjJ1FoyZoMEql5P6vskrLysYaYBx2QZwRjlDczpcL3BRRBKl63JZ\nJctRHgmNL5/BtzlXdSZbNleEN6tvmzkuqbeN4FmIqlVtCHi5BkpdnhuypoG/\nxjPa+UypEVI+8y0c3MiTyepWbjz9CEcWx4X+bDu/FSohCRTx7Nyxdbk6PLGl\nqODKWkEori/yN8ck1a0yY2uTS9Kn553x9tZbOjthxeF7YYbGskyptUAMsJux\nXfkpghWCqGdwR0LkB+98GQ4771Py/NglHxiKhlUkHR7PaLJLe+/zIh4u+DDL\nB9z/2wefrizx3/tBwE5m6TACvRq4UPVCQYNG/ALEIdPEA/d30sq+TpIUCXm6\naVdLOoOdap88RZ13INATMOB2NYtQtjWaY8La0tvM7rbK2rESd2DrycepvCw/\n3RqT0SjLHGJjoPGYGc9UBc/0kn7oVlVtx5Gc44MuZkz6rQFpLReow0Wzzfsc\nE2XuDig+I2wn0eFBue57xElhCKs/tn9kthOT0j2oI2yNEZqQT0heTwHID7ve\nhi8aTfm5yeTBonE4rZ0ILgqAI2E5zaIYaULSOuIB+6kmiBhZ1N6GxRu43Xjx\nyTrO\r\n=VRdG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrIAVDHx7LvLZWvliyEtPyZqE922XNw6hsdf/XDM//xwIgbUHDeCWE9kF+/xXr2yVaDepIXHeqfK4ItAzBOELX/sw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.6db76faf.0_1592860395064_0.7858276348481066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-select","version":"0.16.0-canary.c4dd9684.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.f2a488e95.0","@material/line-ripple":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/mwc-floating-label":"0.16.0-canary.c4dd9684.0","@material/mwc-icon":"0.16.0-canary.c4dd9684.0","@material/mwc-line-ripple":"0.16.0-canary.c4dd9684.0","@material/mwc-list":"0.16.0-canary.c4dd9684.0","@material/mwc-menu":"0.16.0-canary.c4dd9684.0","@material/mwc-notched-outline":"0.16.0-canary.c4dd9684.0","@material/select":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wKvv2jMJ2p608cx91NfPAE+XIUckkR//w7cwIriXmzg66X93Ky6Ti8QmbAGnZzGIDg88MpLPvHfYEqjuRF6YKw==","shasum":"a714be2e3b3244487f2ebb3b09e6732efa130463","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.c4dd9684.0.tgz","fileCount":46,"unpackedSize":926544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hymCRA9TVsSAnZWagAAWzQP/R9apihTgqVDMbkBXStT\n62PguOPbvafCCR22V1zZRla0MytlJpwji0RuOzYjSNSD1zq3Di9tBaUfqbhd\nf0zHI2/vvH92n3wyJyQTfK/O/rVLqaxj888RrhNOls2+BPROSWvzwBvWlzV2\nv0LpxZ3kdsJw3GLw2xCzNb2YJ+wIDFVNDxvGwqN2q4Z4LKIPjG+gsm2iroUt\n08xiTtytj48j3sFMQEui9jxYb0aXKU6v+K+TVJUWXLoCZHaa/2Snbsy0JhP7\nf8LlMukMC6zNAB4+UmangvRATotrrVMuHQj/DgP2t5KGGdsZF5vpmlN2DgHX\njg5HT1DMyqEKO1s3Fox5f6n0ybp3jKLd/Arv6hDrP9fD78+u4SdGs6+AvZ03\npWM8s8Rg+r/2q5MCWD3D4gf/EqDKfVcsSADWytEbuwCAyVilWkGzy+4iGrA8\nwVz0swPzg9LyKP/65CkFFFY8aS6jBjhKRrSKcD48fqzLZXs+EWr6oJklh10h\num9//0sLIq/W06XSzDon5RwWYO19Uy+h4a1zMoAXkJlUviHvhr9fZQOrbUYk\niEpW16hZgCFYj76yicTbtRloiasOd06Rhp9jvxYidJdZmtK+s3CCVVQAIpJW\nt1gIe8HL8AjFMVNhocZUsaUBle/3DPJOg0vA84jHpKGox4dRf+ObhgXzUt1/\nLa/F\r\n=Od5B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKCV6KFV1iQgcIzmrtH/pYzaFescZidRADF9VheZkmHgIgff7cM8a8R2M1TC9VJgNn4GYQ/KmwjTO4w2ryAeLn6so="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.c4dd9684.0_1592925349942_0.7372421945164176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-select","version":"0.16.0-canary.b3e53981.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.15e81fe98.0","@material/line-ripple":"=8.0.0-canary.15e81fe98.0","@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/mwc-floating-label":"0.16.0-canary.b3e53981.0","@material/mwc-icon":"0.16.0-canary.b3e53981.0","@material/mwc-line-ripple":"0.16.0-canary.b3e53981.0","@material/mwc-list":"0.16.0-canary.b3e53981.0","@material/mwc-menu":"0.16.0-canary.b3e53981.0","@material/mwc-notched-outline":"0.16.0-canary.b3e53981.0","@material/select":"=8.0.0-canary.15e81fe98.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-icI3liQ27imaksARq/lzBTuvl/UVgOdSWyh1EkJoSgZB6GBBRPZoQfwqVFwr/EoB0Y/fQfO6gZM4SAs0jJyEYw==","shasum":"b135a21ef4efa58c739e21c5721f7a5cd916b0dd","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.b3e53981.0.tgz","fileCount":46,"unpackedSize":926445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qDWCRA9TVsSAnZWagAAlXQP/0kOBMBtUH+2hSZkiTrb\n/jFlkRfsUQYdFl7PgU7QSQeXVfDMc57VBK/GagpCr5731otDLBGjbT6xQGLs\nVnOygMvXSZsXTuAQvKGP6nlXzaWDZEbrseM5+VZWlMR2drGEsAxJSZXDTo/X\nMiB58Bro0MkXpXCPR4bXpXrDYOovPCgULdpTnS6kvH83muGFlU7y+zwttiaG\n1kZbmkJEK9GgAi8RWFrZ65cdQRpFv5mW6w2FAOdyuvf3C703Rm8uVpJhfEsD\nzdJc3ZOmis2yuMwAvreXYT2UXlK1Ja/gUnYAjHefln3PrWnThUgGf0+HiquN\n8nJI7Bb1HsbRfTXXwasy0uCsxmk2C/6hAEL1BDW356nTgx/8JHABOPRkTbgO\np8lv14f/tYFzFz8LCdG3aywuh9wRkf9LZ3heOfbDdYd1wajfbLgycvRQuiKN\nYHXx/t6BIghcUnMKYtTGxfos1BqbsbAbT5ETr87iNBjiPnjT/IvINYTEXqAN\njBh5a4LVYPJePZSXouMzBrfGG7Wbd+Xr99RKcnOJN0UpZ4izyaw4VB0ohE+v\nr//Gry9Zw6eXwRn1rzBPyfQiOTON8/64bCT01y65jz1zJU83f9v9jmkBU24E\n9H7KRTMNySZSYuknCxy0KFf8yucvrcZVMHje1hPQHPVs9CojZdVp3QJaYjUM\nnGpH\r\n=+B4R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB2e+r6UeGVvpBOIWEt4xEFH+62DatUGkEXCFtGG6R6gIhAPuwzxFnuWOq99F9yipcATZ+MEQzC1G/6GW1UR5qrj5L"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.b3e53981.0_1592959190102_0.11352526448659406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-select","version":"0.16.0-canary.b9468f77.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.599b8c319.0","@material/line-ripple":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/mwc-floating-label":"0.16.0-canary.b9468f77.0","@material/mwc-icon":"0.16.0-canary.b9468f77.0","@material/mwc-line-ripple":"0.16.0-canary.b9468f77.0","@material/mwc-list":"0.16.0-canary.b9468f77.0","@material/mwc-menu":"0.16.0-canary.b9468f77.0","@material/mwc-notched-outline":"0.16.0-canary.b9468f77.0","@material/select":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GyJ0qsKpXAHXDW2Jvm0kiP/mzXuMHu5I/3me+8N7YIh8j3KOfjSKSsj34wBsJj8+61CqXUdgauXNiyrFDT59mg==","shasum":"c2d2da70bc849dc0ea2a38cd200bf680a2d885f5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.b9468f77.0.tgz","fileCount":46,"unpackedSize":926445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88vcCRA9TVsSAnZWagAAmNkP/jle7gKHtH2TOIZJBC4T\nvuNL+cLly/oZvnb1GE8BIDQPt/ivAEipdksQMq3SzVbdWwTtFy3pwbxvRFxk\n7ueqHTO+5uPcdKfV3oH+65yWEyDkIJO1ll/L17R8Cm8+W9RpgmEWYH+TZLrV\nXyCLioYxXcekVtwJp/FJJoqM2ozbp/gsgpJD8BvUn+xcIvfPCcONQENaOnce\n5kkq0WmIxpCfN8UWc0fpsINWMCPCEsZRC3DRHK18nb1ImLdm5khDmwYbhwsa\n7xPXc5HMF5YiIugQFozhEXE7JKG0A9xVRggVyRO0ibXCdNV1fYGbWoB1tnCX\nDHyBuNBzuUzerxcjGBKflkLREDetuQYBX2o7ah3xQX3WQh3S/cJwq6nVTK0E\nxcvztxMzo2YWqqQBtwvSXIa6iUEGnZnYVXZoAFP8XzMz1wx3wsOPCEpT/g7n\nS33JcoD0aAmjAeprXz1N9Pz7v0JhDabLAOkZZ5BBPfu7Z1aOmMGlIpWJjfra\nocuZQ8UdzbR/oWsMSxS9YfmCl2dtO7gnDvgYt+Wzty/2Kf/+5UvyX3PHod3V\n2zM8xQbPN5qCVAPv+ejfRFjI1OLhwSx2/1mQ4G3qI5S60DwYwhvn3mzjM2BL\nSx5sRAjc8Qn2VqGA3m+nz0w2Qk0JDqH2yBlXNU0ngC0Dhss9gNmOlkUqJ2Ax\n6x1R\r\n=O32P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpjuh1VZHj7JCylHAyUV7CEjkmMb5v5Rhu2au9iWJtZgIgLvJDPYa2sw9gPhPVdrD01SBMg9pfarT+LdkZF1De5zk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.b9468f77.0_1593035738885_0.8151812594816834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-select","version":"0.16.0-canary.eb790e49.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.599b8c319.0","@material/line-ripple":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/mwc-floating-label":"0.16.0-canary.eb790e49.0","@material/mwc-icon":"0.16.0-canary.eb790e49.0","@material/mwc-line-ripple":"0.16.0-canary.eb790e49.0","@material/mwc-list":"0.16.0-canary.eb790e49.0","@material/mwc-menu":"0.16.0-canary.eb790e49.0","@material/mwc-notched-outline":"0.16.0-canary.eb790e49.0","@material/select":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0poMKoXuOfu1C3lyOyL2oh/X8uj3UUDSmitJ5VcA0sUPfO2cg6RNi9p7A+LqilSI9aw/F43daLyzOT/ylDbKfQ==","shasum":"b56204a3da5911ba9e4c42756d5e04e9d55d0d76","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.eb790e49.0.tgz","fileCount":46,"unpackedSize":926445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTgCRA9TVsSAnZWagAAjUgP/0CTNdRk4obdb5o2TOPL\nOP7b3zlgudkyewuAvzaE9moTszLk5JB0ooA4GbIw5PBvb0cFyf7ewOYi7ObN\nesawvBnIlL5uNCGMDIWgZJhZ7ZPECaSK4wWizLLnDCZneLoT02UewtKRTMYd\n6lqURGw22rMKe2Oo3rvHcnjOaQZYCUb3LXSo4mtF5d2P/h6iyuzJVXf+iEOn\nUA1JD/C40VyaUuJgn3hOfT+qNpZWDKJotI8J8mtuF8nJP3B65FnLtunRL8h+\ni/iNahS0Urj2TmvKdd7TfNqXb7NXZXD4C3HjkI9lp4zEuJ5WLjrIa7hviABo\nYe+vVdyWe0cwBLvLRl6RGOkgy9oOdL7Y4jl7JfMmBpNVOTn0Om6oYGYOqdce\nb/gUyzMjB69niQ2lCMedUX2c+WQpGZFE1xW/CFPUd/XoeQfbBJ1/n2uM+oqf\niLfkX/SuiHBQAGjxgrW4aPnQF5flyCkiURU3ewB5TsJASTYVfWfmCK//WLew\ncD5oBERtvPSCeMuDVg8Krr4RjWX/X4CredQV8ygxzWY0JMmU9ex1rXPWOfSF\nVQAywwpAt5dUUFMKnONPMQIYYi3ouEgqvx4sRnGMAh9rB2kWyLPa7Ta3iMws\nYZX/MIbbT+11tWWjOTwlao9yFRRWhZZ0U9d+ExEXE9OQv4Drvs2Whx+Bsh7B\nfQyT\r\n=Qt4l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMS5m8KnjFT6p+ZLb7RTOtt4T7a0JRuAbOSvwQqBlgMgIgU75bKMAw5oGuBxobmxhUgFm/Hw1T1jiC2ZUntu+c4Ec="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.eb790e49.0_1593119968372_0.3826934525091821"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-select","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.38197b443.0","@material/line-ripple":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/mwc-floating-label":"0.16.0-canary.9aa1a5c5.0","@material/mwc-icon":"0.16.0-canary.9aa1a5c5.0","@material/mwc-line-ripple":"0.16.0-canary.9aa1a5c5.0","@material/mwc-list":"0.16.0-canary.9aa1a5c5.0","@material/mwc-menu":"0.16.0-canary.9aa1a5c5.0","@material/mwc-notched-outline":"0.16.0-canary.9aa1a5c5.0","@material/select":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-I30jO4OIQKpdHoG0BZLKFLvaLg89t90vEM6OEKuTv9de9yp9ZPyRHaX+IVhdoHCV/B/B2W4M/gdsWqgXE8UA4A==","shasum":"9417a5ed93bd490e52c5a8b4106dc8d69c9b0b37","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":46,"unpackedSize":926445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irsCRA9TVsSAnZWagAAtGwQAI2HZ6fCGGE6uzP0pkYu\nuDa8zH8CSzCu8toxzAInupvfX84gBnBiVoiOFZSIw/3z7fYPZuWr5Vi/qJWH\nY4fa1hP7rNFJfHO04fGP2+9C3n++puOxVOR/fl0+7468NKaba8Pbi58wbY9v\nvBQX4L6kH01DXeIzWhHSEA0FshicnccJEj/hYe5NEEG9+CKl0ofnEGfAqRSc\nEQpK4zEFXegT0q66+pAvFq/blKL2xwI8I0lQ0SA4K86Acfb8ZgtduPzIpo63\nUb8v5DBp/JYMchw4QRT8hVprHqBkaHosly32M3YmC5XGFUiswNPwyHi8kRU5\n8fVpIQaP5eUufQmo2UDH/iPQeFh6TUl/+KyEZs+9/COLgcqe5F78u/ePK2p6\nc9TEJkjw/umUGtfxB3q2lb8Aq8y2aRRNUq9laQIzaTpNiOwtNG9fqWHW0PFP\npxbhd5QVfeUBH7za76GmGKbqb10i9hAxusvSVtM5gYRqpXUVvbmb4OPg5GYp\nqdGN05YMxkiFWgSEP26VTFP55/spt21RtElHdWk0wEwVzgum6g/x0tTAILgF\nFtlsjxgTK3zN7MBQ04JfnFhLVzY6+bR6Hu3mD63pKyleoCHcNRa4H25FN3cO\nrz3ZY2lEddoMcc7Jq9+ZprXbZSV3E9NrdiHrQedy14QLpGEwr53kwk4GqT78\n8jxm\r\n=N0ol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz50lXl5aEsyb5ajhPeohq6VS7TUO6MtuO+6gSTZIH7wIgN8I+Ae1DzIV7YYv32RDHO5J2Y2Za9bd6FR9YIGYyZYI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.9aa1a5c5.0_1593191147946_0.8440657212211009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-select","version":"0.16.0-canary.d36e9861.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.38197b443.0","@material/line-ripple":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/mwc-floating-label":"0.16.0-canary.d36e9861.0","@material/mwc-icon":"0.16.0-canary.d36e9861.0","@material/mwc-line-ripple":"0.16.0-canary.d36e9861.0","@material/mwc-list":"0.16.0-canary.d36e9861.0","@material/mwc-menu":"0.16.0-canary.d36e9861.0","@material/mwc-notched-outline":"0.16.0-canary.d36e9861.0","@material/select":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ucAdVEShArnjLk9zHzmtC2j0uxSP9WDNsx05N3VnfUXVOsaSseKlfUEuhNEdVFqFg8eoRfufYgh6gI2f37265A==","shasum":"82ec5983213cd93ec7b4196aa583bc3983990798","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.d36e9861.0.tgz","fileCount":46,"unpackedSize":926445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jI2CRA9TVsSAnZWagAA72MP/iaTzwqhcWr8WEWcT9jo\nvwfCLQvL4EsAEH+P0lnCV9moS0YRFTM61aZqXcrSn9vttgU3uhT+e49qGK0x\nlf7vmqVNRrK1b2bfL9F8GRTHsYfyWeqZahBygrwl2uwHECfE625H8ukyktWl\nOeYXI4YyZ7BMWmDrRVyjppIF5mzZdYbq84QfUq9PXSV9S1FDwphqTq4jWgRj\nbik0e3YeLrd7RZQbwIIKUmEIVjzf56vl1bOnfDU2MX5cW5XjhInnXoo+cHwf\nSgUnOb4Epuch46CqJCAfHYe5LYdJerHsymMi3zJHU1WLeOX2E1CY9Idryt8m\nd8KBJK2+Ua3Xwrb7iylSxswTIw2870pxw7UW0xoRSXJ0vg6wj2sYu4PiVIeN\nZUxRSZZU9baxVmawAKmrt+/1NmjAga52o5vGPg4ZBUjEPPY+xfXzswSaYIL+\nFpHNYMDgo5qdPUZ0+RzY9J4Z9sEQDCm2AdRtuVWxWVGW98wRsDA7T7T4qnk/\nAWhPaepe4cfS7wSdNP7nsTTopknvhbuJKkVSjGQjKg6Z8Lv3XVfN0tCFiH1X\n799qGaX1+neI4qItTDDo1ykI0dyxrq0uPWbhhj8P7Ec+EXgeJ+zYMx97uHsT\nM2deav8XTpxWaAbm8afej3AYMA6Sd4lWpiv+8x54T+M+9C04vLcaWeqlrTI9\nF5YD\r\n=GlQL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH5hX/MgZwN777+kVcFmDs7q5hZ+2NO+qFxemruhpTfDAiEAhOcUrPk2aRpOZ/tQqlk1WQJZ6V6meXZ/4hLVgfI0YIc="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.d36e9861.0_1593193013885_0.12543576227279263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-select","version":"0.16.0-canary.155c2f85.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.df7154fb3.0","@material/line-ripple":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/mwc-floating-label":"0.16.0-canary.155c2f85.0","@material/mwc-icon":"0.16.0-canary.155c2f85.0","@material/mwc-line-ripple":"0.16.0-canary.155c2f85.0","@material/mwc-list":"0.16.0-canary.155c2f85.0","@material/mwc-menu":"0.16.0-canary.155c2f85.0","@material/mwc-notched-outline":"0.16.0-canary.155c2f85.0","@material/select":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mB1dexTf3GwmHtCb6Cp7HoXdWKbMmGb6Gm8+/hXOGyqtaCENnAnH1eFbgzVzpT5atA4GcrxsG2pD5KsArsAVjA==","shasum":"2fdcebe4cacd927aa7e16e182ba0b8a68112cd88","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.155c2f85.0.tgz","fileCount":46,"unpackedSize":926770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oUiCRA9TVsSAnZWagAAwsUP/2dfRcAOpD3Z0gOqkXuy\ntMCPtTbJvpgGBHDQ5Y3n5JlH6etzOyEozUhlXcrHXjNr/+XOzzk1cHEI8wVY\njt4dREafXQDypVugwyMaiKtPDfDuTzRmtJMwWrYSYmyow9QNXlrYcDU0XkIi\nzid0LgB0kgBzJDGvwcA2f6K0wdXdvLpZFzII6hMxn6s7JOB5RGO3WNhyJWtT\nit9JnDgBWvQLQuRbxXsufiTHUMv7m23eP2Il6PScgfUcQo4Gs+ZRzFce/HNZ\ngYjBPBz+LRHfeeAlC+IVPYUm00MSyRG8wNaY4eVJMVPpJP9YFdluQSXyuvXW\n/wXqUIHDh+jJOUKBQrdazRV57RXcq8c3D/8Z0aFDxkyPY/HDZecKn0Xah3To\noNN5+6/sUfDAJk+1EyPA7Qvdt3KRJxoEnw3WTjiyLQjzBqpM6ocN812rgF9q\nhex71yd1xUPJ65VFSOJ7PRZKyWZCP0sMmtXfw6SyBhtpDvvF/KCEPTj7pepN\ncjXGp7xVpIp4clZpZQQ5I/dz1Vc2T+zF3eG0vH+Y9vPbODTPIVJ043TCEoZV\n1Mdz++gaH5SEGnKKZ3iv+ymJ2seIJa5+vcXyHVobWRx6ERtyjQQjyEKgCNoG\nj2MA7MmU9dAgIalE2ofMHtj0KyRNJiqhIHCIK3IJzeCzvPSJfcQl4ajcTHcM\njxV5\r\n=I+wc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYpK78AmTeGrsQGYQhO16xl8Z4YLYQ4/SR2JccSDC0jAiA7KT2wiS7MpN1YIbFF8jQTXTUjXA91UpsMD492iAPrUg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.155c2f85.0_1593214241958_0.6383064642259633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-select","version":"0.16.0-canary.340c9c40.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.df7154fb3.0","@material/line-ripple":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/mwc-floating-label":"0.16.0-canary.340c9c40.0","@material/mwc-icon":"0.16.0-canary.340c9c40.0","@material/mwc-line-ripple":"0.16.0-canary.340c9c40.0","@material/mwc-list":"0.16.0-canary.340c9c40.0","@material/mwc-menu":"0.16.0-canary.340c9c40.0","@material/mwc-notched-outline":"0.16.0-canary.340c9c40.0","@material/select":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-e74DlCbfgP8hnYXe+A2dOIz1kKXfKLhUL59XQnnToNYiFG0nDXUVAS09rbtKS8jxbePlZVXYnvycz6eDZe6g1w==","shasum":"114a4b540fa088a15dd2bf0d19f9cfb8c1d6bba0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.340c9c40.0.tgz","fileCount":46,"unpackedSize":926770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ocHCRA9TVsSAnZWagAAckIP/0J80kVFdBtUyuIQo88e\nfQru3OL0zlq7FJhO9QqG6FuyM6QdpPc4SKacosWYx0F/HXxjJOFHKjn5mxEy\njCqPKf5bhfaO//gUSdc41sQ437oevTJ2Nh7xz9OdIMms2kQo+RdZdRnAb9k6\nZo4nKaQKYbgS1hMBNz71nxSCirSFIdXngRPjwwWQzz/CjAMCwPAwt0DBtP5x\n4d9o1hKN7vwCCQPqFmHJ2WwtKx+haqYS/0glfvmr33gPARA9v/M1BnOZaJmN\nKU68tFXWnbn0gzPPnuwRK2vYMiRKub/vlvy7mJVC7N3sjKbV065Fuxvd7uKG\nM2SgMJKud/vXxK6knvgvDKW3L6ueOwOqHE8YkycHZ9ia9sPpsVq7PodFb9qB\nyuBwGpq/mBldQbORzQN7Oj8Ye1SBRJE7rtcg2C3hRqIi/lKqcazURZVYtwEn\nhFlYvYgXZWtseGeWQos2CLPB7rbN0Ek+ozzZBHqHTuGYh5x9nBlU1cRynxs8\nEHhhJnVAGK/YxnjZLzh4EqdMrq8Xa2pHwFbwOabSJiN4YGHAwcoXTeBlePe2\nvMzuk/tcbi4RI2PX4dn3HoUstSL2BbnAjPPW9piKB+J4NzEkeewKoXzTK16e\ngOmJ9rVz0g7TOx78GbGeAeHgg+X5WVBHKLNJqJFMMwPEDFYAts4GfCuJyK4W\nMXIK\r\n=46Mn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBlpy4tecuTZ1wrDhznqYJd7QEItusUmStbTIvm+U9ojAiEAz1w/fVBdk1sYbicUnod1+u3CHdosk9c7JDuhVeW1gjQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.340c9c40.0_1593214727200_0.5946559299616565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-select","version":"0.16.0-canary.a3384d2d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.c678a9d34.0","@material/line-ripple":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/mwc-floating-label":"0.16.0-canary.a3384d2d.0","@material/mwc-icon":"0.16.0-canary.a3384d2d.0","@material/mwc-line-ripple":"0.16.0-canary.a3384d2d.0","@material/mwc-list":"0.16.0-canary.a3384d2d.0","@material/mwc-menu":"0.16.0-canary.a3384d2d.0","@material/mwc-notched-outline":"0.16.0-canary.a3384d2d.0","@material/select":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2gIS7lv0w9nosInNyU+uVJck91E4qeXgNV7HroksbsFbT3a5xnlCgxnnQzOdPtuBtKMZyH26Bs3TKih1kgR8Tw==","shasum":"62ea7f602114c8c0017628b9bb616bd0928a01dc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.0-canary.a3384d2d.0.tgz","fileCount":46,"unpackedSize":926770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6gLCRA9TVsSAnZWagAA264P/21Qpj27f8gh2TuVY6vq\n5uYtHzA0df0RnKCeaPknSqtLqmYpA6nkFMp+xbe1ciWRLZUMUMCpXF8cfQLb\n2BgWedKxGQyTbMf64FlptqU9O7P0nL/NGpFFjOwAvx8f5UWuWr2xaJJjYPl7\nCMZ0enizx8uXS44IcqmUDcEX94PNi9GdFkEROJaXL8NlmlJAL6sI8mIoNh+J\nVw+NJU07RqHQXAMQwHMJO7O/jf9GHnffBsK6k0/p7Qj9T1dBjdMeHJCAfagU\nhUC4d+xjhKuNnKTAtnvwL3gWVYKxSW+c8qZXpuMkYgNwQkdWUDXRxjjdzLRl\nkDE2eBIDqOWIVIQe8cxwR6E3ZGSPmsaVbcvbURnZPrZwLzvrmHNNrOU+7MXx\nVamfsgXyWKcS0u4Ad9fXmf5TZSVbm3GC123YnGR1K52YbjsHSw5Z5ktJC6Eh\nYwr2xqRrrHjyZAIQ3fmag9QvZBOUSUkZtV8ToPKoP28yrEv+N7x8Tm45DpXZ\nqhMG+PBDfzLuiPlAJXD/97WXRsCOHmgMHHKRfEgVl6gBw2rLHfJynMmypDmL\nmrvq8tU2y9U3q0qP+7UD69VLK3qlfm4aDSfpcPhm1DI2V9eolMdojiOOR1FA\nJu4P79o4AfiIilYeDBMOUlpza0q0PS/re21vvLldA8rfzPaGWvxvhH/L9+AA\nZMPm\r\n=LIvt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH6ya6TSjIcz0oMkINnr/G31wY2sZPAtC523gF8sh0+gIhAJwUHPLcb+eNBAmFX3UxomR9G947qcpolGN+1FUWQGEk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.0-canary.a3384d2d.0_1593550858909_0.6309564648744401"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-select","version":"0.17.0-canary.6d056c96.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.c678a9d34.0","@material/line-ripple":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/mwc-floating-label":"0.17.0-canary.6d056c96.0","@material/mwc-icon":"0.17.0-canary.6d056c96.0","@material/mwc-line-ripple":"0.17.0-canary.6d056c96.0","@material/mwc-list":"0.17.0-canary.6d056c96.0","@material/mwc-menu":"0.17.0-canary.6d056c96.0","@material/mwc-notched-outline":"0.17.0-canary.6d056c96.0","@material/select":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xptxfc5OP5I2RebOaWOz+VNh6julf06Gwk5Z4GpKeAFGrUFOejMPFfixiVDsLvM7HBR3LMxtWXCYpYyeSg3rtA==","shasum":"0ed9585785c8de980c7dc267d02fa6b4654088a3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.17.0-canary.6d056c96.0.tgz","fileCount":46,"unpackedSize":926770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6o7CRA9TVsSAnZWagAAZQsQAKTjx6epM2HcSV6e5Kcw\nV9RQJVBObxD6YhnLZvNeNKWTgRQe3XOrDEAkAVEhcqW+kj0hk9SB6VshFxdT\nIyFsge+tykmFyyz5/Lw/ItJNEmUtYFImDY/Zy7RsQGFW1gTtcsRDr3hLrwBJ\nkDhIL4KmqrhHeEeErDoN7lPaOgFrF3imFw+Jp9xQx2tLzvpkQbtMrK5/kEzZ\nk/pm+2cliozALg/zrZxOyH1iUZbb4uGJOIW1Co/wlNVdwG7/QZDGveSk9Tww\nBOv5ADJwNxdpSbusE8w1BE3ckaV0T3cuhJV6vzh3zPIiqOp90SSTNyQszDoB\nmdobR4ANY89dCqak5vpLaebZI5fWz0M2iw7ve2eBDH7zRA1Fd3FDESoj7EKB\nxlzvexDFVxGPEswj1meWVFw53pk1LyQkBh0drSOHJYQpnMPIKWtBaejAjl0T\n5QTzy7+ZMUDgGuboU3IwiF05A2ppNhtgoM+Hgv8jzuWRZMsOTDknOxOfOW7T\nYICxS7An40fkNcpghwDW/6lrGE1vur1nQvZIj9IxxZsZKH+jcONB0FW7uLni\nu/f+50246x/i6P2ZldBVM+p1wUby6B5m1Pt9VpNLev0sr7oOO454PZ63Bdo2\nyOrKYm2+wAgsVS8lYpYpNDUGz0CJw5qMKzTXpagWaXA1IiF5Ul6C/4GZXgBC\njLLY\r\n=NfyZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICReB5qFZnKYn7CfnUiq7+EPwePHRMvkp18nkwYCy5YMAiEAlYOB1vqBUY1yjj7PLtavcJTDimT8tl9HBjrzMyMFfug="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.17.0-canary.6d056c96.0_1593551419433_0.5185364558047312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-select","version":"0.16.1","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.c678a9d34.0","@material/line-ripple":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"^0.16.1","@material/mwc-floating-label":"^0.16.1","@material/mwc-icon":"^0.16.1","@material/mwc-line-ripple":"^0.16.1","@material/mwc-list":"^0.16.1","@material/mwc-menu":"^0.16.1","@material/mwc-notched-outline":"^0.16.1","@material/select":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-D72QMLi3duxuXbN38O6a6BgSObZk44bXcupwAW5h9g9g+cDRJHdbyUuFIcI74fsorkwlAiTA838sYr4oO+44rw==","shasum":"550e7b8514740b1efa184d1ecfc6c60ac9cb2498","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.16.1.tgz","fileCount":46,"unpackedSize":926633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6thCRA9TVsSAnZWagAAPukQAJVDIe2qOT5TGjuEN9T+\nQ/JeNhPWzhxFz/Czikv5AJ4Nt9Sr67oX66aCZLBns4vcdEjOUjlhpEG7VmLt\nWOOu2jOetN84LeEeXTJGqu9ovxjozW27m2dkQxjqAdiGpCOqopfsqYV71Yg8\nryHjnZqGMWmAq9H3Au2rJfjMZGs96Yg36H5qC+vLtN53/aGJ0wHhDL6qN8k6\nvGXsWtR8+YI/0DBJ05CvFKs4vTMkaOcdv13TLCEq1xIc/Dz9LuxVGj535P8E\np2AajtGtqlSpl9guRCPkCmj0VGn13IqcLTWdNeL6aRahIga/i84KoOe9neIW\nq/ahxSY2Cy0fNY0AGK9McjuU4m+WdmQogNEJs73wC88I1dXF7o7uSTIiTYfd\nSJ2GY2FFB6eJEpCBNv71w9QRJW6MEpr7/BsRePOnVfiTT1trvhmYs8pFfe2H\nlFqU2fLb0c3i2zt/0gvgU7CfH/DWFCUlzCtFPvJNMIDAnZ8t2RWYYFsI/6WH\ncd+VTzqyM5Yuky0RFg1JWGOiSzoIlrZwm0M3GbvGlPo5k+coZ9T/YnCaJQfj\n9YSLKiKXOqpvzdtBoX5yoY/a/pyXGKq48DOVy+3JjIjoXzi2yxi2ZNOKP8V9\ngICodsSpVUwkBaNaiNscSm7t20CC0g0EK5ueLuuT04TE/saiOmuqSS0NRCWV\nXaBf\r\n=WVCC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQS9WxcCZ8qHc0DxMbkuHPlL1SSCSWzFDtlStUqLCKrAiEArz11CymqEgm9Q1Zhx3atDxpZoitYrBLQR7qBaNYgSyc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.16.1_1593551713195_0.7459472220298013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-select","version":"0.17.0-canary.f7e37607.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.c678a9d34.0","@material/line-ripple":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/mwc-floating-label":"0.17.0-canary.f7e37607.0","@material/mwc-icon":"0.17.0-canary.f7e37607.0","@material/mwc-line-ripple":"0.17.0-canary.f7e37607.0","@material/mwc-list":"0.17.0-canary.f7e37607.0","@material/mwc-menu":"0.17.0-canary.f7e37607.0","@material/mwc-notched-outline":"0.17.0-canary.f7e37607.0","@material/select":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-m1JkIIsKSxefEIGH0oyDzlHJhGm0ORvKcAqVhXKA7LBxcKhaVKrOvhw8luSHWuuL8nuATxxCdrcyvl3Uro1lNA==","shasum":"33bc69769fcf9668df9d6825c5c795572f7f029b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.17.0-canary.f7e37607.0.tgz","fileCount":46,"unpackedSize":926770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7JJCRA9TVsSAnZWagAAjBAP/jOC1Kbl7WorQkQZQZC0\nDkJDXQRK8lc7OPg512+tlyMvUw80b3OZFxAvWyViq5Xp8gylqqViwx7rsCmX\nt0yPMh++6rUfmTWJ9EGKBihUub7EyIjryoBIB3sBceSqpNYlWgocxr5yFBpm\nXHhVfIyCx8kWpJ3MOs7ZteDKmwtpWH4XR1QvjBcwiQD0aGuYdMLglbt65OwW\nEOV9WosuVyt8Zo2not3vG6/NqkltNYKZDw0MwVBfjw96knD35Otew/SnK+Lb\nCYKXFqpGJiO4bxJsZUfi83f0lh4Muj0JFAAQB7iA15DIz9p4FX4agI/WGjjL\nw99D7ur93lGslqCN0S7d00rOxySvjEV8YhLTN+Hlf//QURQ5QWvNOIXSxj9N\nV5mRxw6mtl1Jo1ajU6vBSQDtr3HF8pOIKTIMSZtTd47/eYepXAw4BOzP2YuW\nrIqFs0w60d4rtWRO4oIONF5V1bb43laeDFSQOB3lftB2BA3rS/fGKExvuDat\n9mfSPTu8NjDyvPR/qVCWk0fqx98kZetavRPJixpWbeHJXLV48K/adnAPX80Z\nS6fqoBa71gmQS1AetEGmI6aNeRKYvHAvHXsJDsxGHKIiu+6swJ3ZSb26tQZd\n0Cw6aFcEJ0PdCUNPLE7pnJXNn76ib08h5yKtY40VDXcAxxGpOH9krXHtUyzi\ntQKx\r\n=LG0k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClrDFBB9HLqf6+1c2x6IwOuT7kXbqa27ScKFCYk7hd+QIgRLLPcVeD5j6WoF8MXSq3Wd8FC24M5cVSr7etNxlpItM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.17.0-canary.f7e37607.0_1593553480921_0.6199474236981926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-select","version":"0.17.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.610c26c4a.0","@material/line-ripple":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"^0.17.0","@material/mwc-floating-label":"^0.17.0","@material/mwc-icon":"^0.17.0","@material/mwc-line-ripple":"^0.17.0","@material/mwc-list":"^0.17.0","@material/mwc-menu":"^0.17.0","@material/mwc-notched-outline":"^0.17.0","@material/select":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-peWYEKftmCQliWlnd3DwbUZceVoJH1GDlIRrQnfKjQaXgoyLNMn3D03FzLF/cHJ9PdiIdrLG5abFBP5TXSsYyw==","shasum":"8ac3b9e921c5752eee9c56131c1c927595da6a69","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.17.0.tgz","fileCount":46,"unpackedSize":926633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OerCRA9TVsSAnZWagAAwsUQAJKIg0V/5YpVFu5+Xt1+\nAd016a32dze++sCWp09DLdlitlCl73s6Otn5P36YdO3z/f0O77+ktOKIgGPJ\nb/WIY3OqkZKmzp24IRkMkpnMC4/JivZlg8rHnfu3x7IGeRjPHS81sahu148d\nUoBrU+pezaGDUxn1EIfENZavvrAD986D3glj4kb6iUd+1euFBiTQApEhY8YQ\n1yd4+EY+N2GfBtFLLyY3E6ErST1RANvATpM+YtcLd0wU0dZliZtqn1gAV1Lk\nku05uw9LcngDgNfj8fTE27pcYn5rvSua3Am8M1orU89hYozF45mpFQUcF2Z3\nu8lbIlFqPCLsNpXQs6Eo5QHqVG/z8l05DAP1Cz7asD2mmuCt3fysbe31kZJc\nnL3/SRiwJVs8aH+87+544u0kU2pTY9QCwzAybckzJFxybVwr18JsNeZPn0/x\nMKroAvQaSyhtS5EuuXowQtfs8jCKBDh38cyVjN43cl63gQQVaW20LfuF3sTi\nTucu1562f7cOXsdGZmlSKpew2FP5SSa3BIqcQBnxZvaraXW8Y3FqD+sqFHAN\npzXK5A+BHHpxnaaRbwPvi9Ig/nEesouMosv/3aBEMlih31edHrEtUrBUT6Y2\nd9SA6ovkhici4gY16lDFMVnMwYh3SVpybiE219YQUqKmdWyUt427h+g2Z0s9\n77Rv\r\n=0W9b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrpumE3gMtOPjq4E3o44r/bJwP27K2U7xlqMnVnoNgFAIgLIhuJtBpGta2PQdbICGQj0KA1OO9XyhTCtOZhf4V76Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.17.0_1593632682753_0.2546385346005362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-select","version":"0.18.0-canary.0afbfef2.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.610c26c4a.0","@material/line-ripple":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/mwc-floating-label":"0.18.0-canary.0afbfef2.0","@material/mwc-icon":"0.18.0-canary.0afbfef2.0","@material/mwc-line-ripple":"0.18.0-canary.0afbfef2.0","@material/mwc-list":"0.18.0-canary.0afbfef2.0","@material/mwc-menu":"0.18.0-canary.0afbfef2.0","@material/mwc-notched-outline":"0.18.0-canary.0afbfef2.0","@material/select":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+n0OoXGotauLSZAMXwbJ0ODOVC42VBjvDxdbwLkmYVNx4j9eFTVGRdFTLPrLIMEdtGV1kcQY0mx0MctYJTbzSw==","shasum":"eac89c903a33c985e4c6cd5261d4ff183153c65e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.0afbfef2.0.tgz","fileCount":46,"unpackedSize":931768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OfMCRA9TVsSAnZWagAAEZYP+gKifuZjKYA2ZzS2dT+q\nGL2jey8WmhSlb8Nh1fu5OuiHX3LwOBuiT5/cvwTXDgaPwqGDe6hD0U5g19cg\nsWt/SIcsImF8OLCW16aOOTN76WruhBUoeO7JvoGYe1PIxapsjGaKtl3g3jRD\nvwxOJrWN1ekS0fV0aVy+O5dlKMZx9wqgRe9EKqqxIVnoewjbOB/A2eLM9UsT\nGEECZc4CBb0C7S/FSHkb8EwuRfGjcBH/HRToEfmcHbQwgvirdYS5PlqfEbfc\nWyZvDE3bhhEgYSD1RExGVXt3kDO9WaWrklr8boDWZDUichP3hf7lWpEqe0Ux\n+EmeusREh12PUSjZgT8v8UWU3jNwip1854+bcl8VgPZvptrD6vd6J5dQkoM9\n9R+TlhgLJBoInWeKldEkwN+xIamLnwy1OWn6//zWjC2PR0Nzgu7Hw0hfkYr/\nNErmC0Rzy6pcHDvIEBtttkRVCdtKqFmVeKZ2fIF0oAHd12L2mKyuCTmio4qS\nw1zw9pagdhiOl/NOBltpfuiw5VYlQHXg9F46MfRWJaZzxHNXCQMX3fma6eMV\nQQIgD3jd9Zw+aBqozh0H7nZq0BftnYhNkv6PKc0qeg5w4ga+QpdQDP1F8n90\nSECZlOVPIOrHJytQ6ChgqCHccApkbfT2pfdnpliGySCOoRwrNQI20H9EdNke\nTr3d\r\n=jeri\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjDNxnL2bWg1txzc8zUQBkPmXHAu0Xt66M+6oRw2LirAiBbbmWdg8yjHxbjg+RkzXx2+pPAfQINPqyev54pjnEMmA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.0afbfef2.0_1593632715675_0.9220622219649173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-select","version":"0.18.0-canary.fd970958.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/floating-label":"=8.0.0-canary.a78ceb112.0","@material/line-ripple":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd970958.0","@material/mwc-floating-label":"0.18.0-canary.fd970958.0","@material/mwc-icon":"0.18.0-canary.fd970958.0","@material/mwc-line-ripple":"0.18.0-canary.fd970958.0","@material/mwc-list":"0.18.0-canary.fd970958.0","@material/mwc-menu":"0.18.0-canary.fd970958.0","@material/mwc-notched-outline":"0.18.0-canary.fd970958.0","@material/select":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QL9sYNRK9d/Y7zSVJh6817Oq4rxKNPMaeZ8+P2TA9QSVu7Jtsy+eMPcIc+VwGsux6yq3dJ9oe8uL6bONVB3a/A==","shasum":"9988076fc2aff45788560b88bdd417d7ea61f0c5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.fd970958.0.tgz","fileCount":46,"unpackedSize":931768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1oCRA9TVsSAnZWagAAVpAP/jSmxTOtzj6KPqWfNPmu\n+9J8FbPrHEDzK8KScjShr0vb4eitPAWiYt25E79f3EjDke48Eq+FIXk5QWQ0\nqm9cl+XYgoxVQWa4KVCAwR15/WbES5Mn+xQTeEjtx/NnxuI5lrhthMrJsRgy\nJVzZRdrEafZ+ArjfA2Xfuy1casvWZR6JJMCpsi6jsTeSTA2WAqg0fdR+kU7m\n3XknfmZwU/+v28TzlyEzWNBHB6ru0bQCTBEoVj0JfsEdST3SQa59AyjsuOsv\njJUPbcLceoddQUAvRxm6bOhcKzcNldc2sGTQXrUIc9TElM5Y3WHd0mpiHP00\nUcneO/dLua4jDDmISLFUD8jtHt4Y7MBU1dtkdf03jAjLulQ8loQnFmnT0XIV\ngclow0Br9xekcM/ta0VA4ZLx+ucJWcuCUZE/09hmOejflZbPl2yH89PTXpNh\ne75PQv68/pDFFXdLJql2lDVSrHq50xjQXZJ+qMUPuMLiutSX9RC92nTQnWk8\nAJQ0tr4LA+ZsilXNmFv251/hf4gBHLo8jS8osxoMvRxLKNvBEMtbAMrXd0+C\nnF5R8WqjiiErriAknrk3KXwdM9AMjqZ4RLGbTTwG0QH6bwjG9IJR5IUvGeSt\nUDmwwp63naKu3TJGfCtkA5wZMLB+ufEfVkBdAlRJB8g7VJln/OpkrGpODdEN\nsOT3\r\n=+Ykd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFo5i7kcY2Nzy/U7jNfMdTXVwl2+pEefRV2XZLQbNbL+AiEAgCmPoieljcerPOqJNT1m88F5RZeitY+ZdQGP4tDh9Y0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.fd970958.0_1593646439690_0.1722747278900647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-select","version":"0.18.0-canary.fd44be19.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/floating-label":"=8.0.0-canary.a78ceb112.0","@material/line-ripple":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/mwc-floating-label":"0.18.0-canary.fd44be19.0","@material/mwc-icon":"0.18.0-canary.fd44be19.0","@material/mwc-line-ripple":"0.18.0-canary.fd44be19.0","@material/mwc-list":"0.18.0-canary.fd44be19.0","@material/mwc-menu":"0.18.0-canary.fd44be19.0","@material/mwc-notched-outline":"0.18.0-canary.fd44be19.0","@material/select":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UFiyt7abvKnoXUyjUZGqCVTC/qe1oi4rM2Lk+5fHCK4rTG/YUdt4BusrGgzQ2V0nUNgks1/+wuuC+dU7XwMidw==","shasum":"4a441c11187a61c808f96b2888b6e50cc0dc88b0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.fd44be19.0.tgz","fileCount":46,"unpackedSize":931818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XVPCRA9TVsSAnZWagAAsmYQAJFN8Cvi75lXtSQTu1LB\no47Lps3yNeZ8aSz6hvGbKWnUhGZ7n/CU4Pu8qItisYm8lHK/WB1QcTLzFJex\nOqZ1cEQECd7kQ3Uy4v9YuSmoi1I/84kmuyYcRHRJ14n6utiJwKDoT40hVtQe\nCYmU6E2WogCGHORVTXtUyNBZv/EwCpS/sLEuE30NrgbhjQ4fMz5ZbJCgHYE+\n7r+OtVOW+YeSiKiDSMiiMlsGs/V7SWg3kvanl8El1PqKX7igAJ76zkWa3gAO\nhWEeJOTr2ciRmpobH5V3q9vcrHP85go6vFBFpBgsBdxw/1DptkNlBZe1QiTD\ndKlseupi+fBCAM0LrGcLqynoBdjFROOW+9XRIxdfQEay5V6R/raT0G6sckpr\n6I5gbiLsmdiQFLr9Wya0x6etclUMJhuZy9jZ2qlDPEy5Me3fzEs5mhbs6h8n\nsTV3Cs/SczpNafMohdYfItXjtTkxkmOaqv6kta5HW7PrnB/4MrdhKC93uNbJ\nl+Xkb/U0cmWrds9txWcSVHRxaTSvhoB1nHPE8n711IDU/2KA5nXh4X4JSZyv\n/BdJ4pOZt00Cj7htSo41MbDg0ArHIoX+fWP3oqav+TGoTYAS+gAWipn7VFPf\nbm1rwQO1m9GC5EH7JNkuxx5Q6pNjdtC3QCRii+JcOdQJrsh92hkiN7JVDNAe\ngV9d\r\n=URXZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCll/YK5eNWYUB+6lHKuU/O4x6laM7hSW37Aoq6/pWNCQIhAJpLhsB7VoJ8D3tsDlrfjnTEjvSo/7yImX2r+GJOT4uu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.fd44be19.0_1593668942730_0.6859460487684153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-select","version":"0.17.2","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/floating-label":"=8.0.0-canary.a78ceb112.0","@material/line-ripple":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"^0.17.2","@material/mwc-floating-label":"^0.17.2","@material/mwc-icon":"^0.17.2","@material/mwc-line-ripple":"^0.17.2","@material/mwc-list":"^0.17.2","@material/mwc-menu":"^0.17.2","@material/mwc-notched-outline":"^0.17.2","@material/select":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-PwUrjcbvJ6DMkBAucNj8cN0lrzWxlrbcT5tf6F6sbGubclZojdHXtShY4X0cHZF4yZakX5InZp/ACHjKsv7lCA==","shasum":"4065a8972f8f66ec9e1927090b651fa4728c6eea","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.17.2.tgz","fileCount":46,"unpackedSize":926683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeQCRA9TVsSAnZWagAAA48P/2vSWIqTKmLeuNnR43MW\naOd5p9KxWdUdBvIR+XhHRuYjBLAg1OJOYZ9cxsOnW+b9Kl4aRCDoIMkBsuPy\nM5L+4eSjewHUZq2KGwJfKs53VnmIkxOUynSO+ILHIbIPUcwKt9WgKAKgTa6B\n/Jfv3LpB7ciNZDy/TgbCBEOAvOFPiJajx3zouAJAr/SLLFfwP+IPPRODXotu\naKk08wSzWpTEBM5k605J9GqqiFHusrpzzcde7ZoDKP2m5b4w5/IAdvD6Po90\nfxt/bS/iJIFgrcQknZcNBDjlzhW089mA1mwMbji5uk4wJBqx8AfH9QzhN/OQ\n3VtOT3pkETURhEiMUhO31ffJn6J0fOSEx9UaTsra04yrJnZjRQ3gN+JfMKAZ\nPWqFOPGODgzv4p8px6kVCX68bMVSNjkkeoPTCyCOLCJbK6UN6Tn45r3tZXJs\ngNPn3iGpsK9JbyWhwiSOxmJJDlUYYuLQ2K5Of4LeCtAfwSWJj1+PAcniPk2t\nZH4UHexR/fSXHfSBy1t2TVO3WE/pjFBZn014yPyPb1UPWIjp3VhSa+bjYJdh\ncfHlAVlVwy1FR/JF6FM//M4lR45VCE19udO+r2m6ehWE8d/TpCRg8X/MrI3I\nKpqBJ3SGBOyypliX1CqzWtDoE+DuuizuP58OzfJewmA4CmNR0S3lx096UTIB\nULwT\r\n=yt+O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbz+6XOkcuCU5+USVghwltOh8MG3LA1mT6pHSUoy2s6QIgdnbQwVC+3aTkxkEhgLfin58i3GfAIPB9zTCpg+9lr9Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.17.2_1593669520436_0.08161517822910214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-select","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/floating-label":"=8.0.0-canary.a78ceb112.0","@material/line-ripple":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/mwc-floating-label":"0.18.0-canary.ca6fc6de.0","@material/mwc-icon":"0.18.0-canary.ca6fc6de.0","@material/mwc-line-ripple":"0.18.0-canary.ca6fc6de.0","@material/mwc-list":"0.18.0-canary.ca6fc6de.0","@material/mwc-menu":"0.18.0-canary.ca6fc6de.0","@material/mwc-notched-outline":"0.18.0-canary.ca6fc6de.0","@material/select":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EYzu1z42daEO4LZseVARi2/+GImIf5gLEhe46DNxVEXJfMP4Jy3fymj2pHdxNn6HNpR0z6l/uh8GKoPY96D4cg==","shasum":"2aa65c990a33b5ea3ceffdea137ec316a340cbe3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.ca6fc6de.0.tgz","fileCount":46,"unpackedSize":931818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XfZCRA9TVsSAnZWagAA/PEP/jygUWfarbon5jrtllgD\nYwbCPZxkbS9FitxOSQSuuANGjolJ1bPmrCC6knT0b0WDERq3ZxRPjMwOEFbV\nTPtTLuRdhOaXNNDQpdQKZGy+mDhBi2lyaYpaE7xFiGNA3BqpHDgz17X0MznR\nGgD5wdn4sYtiPRRWBO1r+cMdDGeN+YDDNAIpIVf38QchAzMYpI0w4cJxpu8t\n64C4eb/I1orN+bWHye8onOQqQWM1acn4yViq4ihd6eJ0WCqxitz4x0lgeH1I\n6iQ6Sk8KvKPIDWPzBKzT+UmjwuD4bj405e0GYVAJ8Mmz1r6uLvimNlAwZkJx\nO7M9Bsl+OOwheq0FlwbU1dhInn+P/TU6Ac3egQfuXx1f2oBhqKjNp368tBO4\nvXke2DyCuWltopydhAMZPyCvclHNkNyUYabX2kpGI4O9CYPx0G+ZiIKuM7x/\n1HWfxxxUCx6d1ecSfG8QwrtTGySDQQzD+DTZkMI8skH/APYE2Ob02bMoIHIR\nOKTz+CEUuxJCAsevRYQAqKOxJtDX4B/uSbzOkxGMXa9TWztcv8kKxRZSf8di\nDutzjImBAMKJ+lOWo64F/LJhQqOo7ROslSv+mRqaxRysv/9y4sZjs7bJUymd\nuk+OGRjeGJPiDz74mqlZ2MNitscFktQAOSoR8r21xr3k+pjrZtZtWF84yk5F\nAlPE\r\n=NC0l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDBo8Gwvoro+kR9HsulLEireeRBCH8suOMyDzbFP/HTdAiAEMoBm4kPNQgYwSdYDibSCEDp+xiokMCdJwB02NCOPPQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.ca6fc6de.0_1593669592957_0.6639144482396302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-select","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/floating-label":"=8.0.0-canary.a78ceb112.0","@material/line-ripple":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/mwc-floating-label":"0.18.0-canary.79f1ec2a.0","@material/mwc-icon":"0.18.0-canary.79f1ec2a.0","@material/mwc-line-ripple":"0.18.0-canary.79f1ec2a.0","@material/mwc-list":"0.18.0-canary.79f1ec2a.0","@material/mwc-menu":"0.18.0-canary.79f1ec2a.0","@material/mwc-notched-outline":"0.18.0-canary.79f1ec2a.0","@material/select":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-O9FFuCiHohHR1BtFkDZUfE0lJ3LCnUYPF8FZ/J2D59jv4KvMsFeYjlDDCxClM4Fk3lDzZqUDEuLdYWp65CFffw==","shasum":"1be4a8dc39c7a3177bc43687ad412ed0cb4dc195","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.79f1ec2a.0.tgz","fileCount":46,"unpackedSize":931818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLHZCRA9TVsSAnZWagAAk7sP/2yc1TqhQrv53CRKjQ83\nP/22YUdzW2iWPNWNhETOvQ2/UT2pv1CHgJrRAIpHIo5PLcQO6KvspXTI1FTD\nZ1aatEjOhptt7xe6uaNt5oygflSVndzRh4S971Wm1YiW44pgnD7uGwLxyw1K\nuTPIGOEQUSA2ZAxz6Bp6dcuDKvKldJg3ySRM9HpQV1Oj1U5xPhveCY+eMe7Z\njaDzVw7D8+FKasxkUmSb73GTm+Jr6uIH2GRwYG4hbBl8oLIfPvk/2PrEmc73\nBfwfEc4zH8yE9fUQCJUtiEFKaiH92JdBznjYyTp4ObGj95qitHNdRfbjGww8\nDXDRQSdeM6U8/0evJa2qu4LyzrnDZaHcXSFq6oJVtwwqTUeOXYFl0j7kbpWc\neByrCatyIyXLoND4i/7NRUrkrfcr0T5LeU9Q5+GmRgtNSH4Bdod0JeSrtHbu\nJ1c1yeRHzRAwfVBegC/hKBJBZbAmJ1wH4UlwCKFQRRJZi4SwQ9G8/XcZ0GrJ\noQ3T3xacHbikZhEDJCyerkdiYm9tZ61gWdYIlKRaaKuQHDJnAEqVIMcbo0mk\n1Epc3CH0FnOJmSdVWk/F4hHWiPL/9N8iz8PRELXh1CiQP8tLVrfTiG7tGpN/\nGVhea9Ba8RmUrz0mqVNNQgbVZV/gxS6Ugw8H0+1Gj5C19bDeHfZ33pFvNQqT\nKkDF\r\n=7Ep4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3tt5gjSzTZmQ0mPjBe9hP5yiRfyCT9WIf+3FKxErm/AiBgx6XJAbBcpkttNK+Kw/r/m7OugLji8gUQmVfCw8rrzA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.79f1ec2a.0_1594143192593_0.7298634617765263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-select","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/floating-label":"=8.0.0-canary.6ed717ddd.0","@material/line-ripple":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/mwc-floating-label":"0.18.0-canary.a7bc45ae.0","@material/mwc-icon":"0.18.0-canary.a7bc45ae.0","@material/mwc-line-ripple":"0.18.0-canary.a7bc45ae.0","@material/mwc-list":"0.18.0-canary.a7bc45ae.0","@material/mwc-menu":"0.18.0-canary.a7bc45ae.0","@material/mwc-notched-outline":"0.18.0-canary.a7bc45ae.0","@material/select":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Oe3+viUjz5A4CgnWzWF/hV3wHE1kxhZ8eihw7YEckaiJCowiwlWo0rM2QQV8NC5pdZeRqvN6MJNC41wmtmHZQA==","shasum":"d5de5815a8e7b5529f59adbbb956fa021adb1cb2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.a7bc45ae.0.tgz","fileCount":46,"unpackedSize":930003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1KmCRA9TVsSAnZWagAATZMP/1zGHiOyK/YLODYEmK1s\nyzVok7by2dNyjA5sGS5Y2KQUu1DdF7yR5gYRN5kp+QTbz7FNDE74Cv06d8O+\nYs0uP3vpb2I1yBWlDxnZpT4rzoSKlAXBaGMMSwYgSrGuXbd9csqAgbnGUCP6\nRzGq80SFWjQOKKXBlT02ZWkfHk5wiQBWKrVvrtEFVz/TREvSvqauqGSyTTJw\nY/IPZ+Q9ElZLa9bptuixlQOSmBq0s7H41qbbsy6gAK0tvyUeT6sO9EKNXuiL\nMnuWmZEJAnwR11eupArRt2CjzyGQN8am8gvG8wgEHs6qEXEmG5pFOuDUndUQ\nY4VLaLnFzUBTshhNxo0meFYD4eK/1dOwEyXPwF/ZbCThpnNQf8ZHbnKbXdDl\ne1kOJtDODnUKz1vyb4Jf0dVdZRihX1VoIm7kpgrFv7Uz/OH1khB1WaOaWPBL\nw8DX/9hcg0Vw7MELknC5bCjnCtfPFraHPO+tN5tURco78BnRlVOC35DRMLap\n8VF1clftg5kSJgnq4oWb2GYiHmpEpVuGJt36D84h5u1oXXJaGZFFWS+0EFdN\nu9RR4HpyLUoLT02l6r2dng8/NdLrwtrmnRjO71Pu2izggjpGJh4PxNsCe3lq\np/ioeDsDEiHAr4p/I7CP7irRtXdPwYeYPBWBFlPpyWTh0Dh88TbI2+n8YNgX\nPJlZ\r\n=vRrO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMiMC89tnaNMCdvBf5NKaqZS/AS7/mrQ87uUmJ0OKHiAiEAnKXLtSX6zLWsYywO4TuHXdaqpAwVRDIVwhi1nqbE4+A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.a7bc45ae.0_1594315429908_0.6501384759767757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-select","version":"0.18.0-canary.b184bc1c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/floating-label":"=8.0.0-canary.6ed717ddd.0","@material/line-ripple":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/mwc-floating-label":"0.18.0-canary.b184bc1c.0","@material/mwc-icon":"0.18.0-canary.b184bc1c.0","@material/mwc-line-ripple":"0.18.0-canary.b184bc1c.0","@material/mwc-list":"0.18.0-canary.b184bc1c.0","@material/mwc-menu":"0.18.0-canary.b184bc1c.0","@material/mwc-notched-outline":"0.18.0-canary.b184bc1c.0","@material/select":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GwLyGvnhM15IUVw2m/3HJkq870cgdZ3S0VEz6SE1ZJr8z5agtJ54rL+WzNpLe1qytNZYJOAPcLTJbpF6lKJIGg==","shasum":"ae81db07f6412e2c87be3e0aae572fdf1d8e5d15","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.b184bc1c.0.tgz","fileCount":46,"unpackedSize":930003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1TMCRA9TVsSAnZWagAA2xwP/iChG0ZS2j9rJLWQhSgn\n6xlJyiwAmugZ3Bg/9AcX8OHcGORsy96ilobmUcBcNXx8DurRieKrMObQIFi4\n6v+3B80IhFzu8E/DNfxlcB7NiX2ZUdAME4FrTDoR0d1cngQsczb1nipq+qx/\niE83L+sODS5sCgxISLgB7/0XHRNd+dwBg95adRnxfZmNdqKsT6IojWKR1fVV\nuO8nK1doqgYAmGzbOuxfvx6+l5Awng1Vv6Obkcv+IbcZA/rmKth3kB2kScLG\nFz1I/42z7s2eeiyY3dkSfXM0y0vhYqjt99JkLM2JSWbgfCmeV8MV520bpx2D\nVaFYsDwdcInuwfRHjGp0wR/nV4FnjZiVzUvuYnf/lya2zFxqzQVSAdRqVmOE\nRuF4cWSes3eMKoVSA6qZ5aRToIw3C7ncDVrVs3I9kXev7PCpJY2M3IDW4qWL\n8W/FileWuez2I8UDTq8r0bC5nPFrr3rHGgK6EDQVTLK19ydayYvg5ilVoAaB\noe7IwtNzimTeKWkeVbiEtMH//0nrIEvAkI52SA9yLAYHaQGgf9VX0V2wavRs\n338qA6Eb8R+QN5Ugcq5M4A6pfJCPCWV9jiyv1i0MvomTz4ZjhSU9+QH3nKMX\nwf8qHMSt9Ztnccd78S3otMlouzSp8bJKS7AERckr0t7LvEeStAjPWVG/6Aj6\nAUKF\r\n=W7P4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ3i3gTrvzbsqTxeYJ0MnqgG7N5JhcZ79BZeuZu0qo2gIhAJkMSruu6E2jACeIbiloN21A8c+WogiyApzfaiqhOqiw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.b184bc1c.0_1594315980114_0.7767508196754116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-select","version":"0.18.0-canary.b39fde62.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/floating-label":"=8.0.0-canary.6ed717ddd.0","@material/line-ripple":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/mwc-floating-label":"0.18.0-canary.b39fde62.0","@material/mwc-icon":"0.18.0-canary.b39fde62.0","@material/mwc-line-ripple":"0.18.0-canary.b39fde62.0","@material/mwc-list":"0.18.0-canary.b39fde62.0","@material/mwc-menu":"0.18.0-canary.b39fde62.0","@material/mwc-notched-outline":"0.18.0-canary.b39fde62.0","@material/select":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8IW9+5dmcWKp7s7yJ4xpmx1xvSQ93b45VKtrahFrDvZv8Pin3BM+ZMco5LiA+u5ZDuH5npPY8JBYcmD4oY1hQA==","shasum":"ddd4526e89277263beff0834a220332415263070","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.b39fde62.0.tgz","fileCount":46,"unpackedSize":930003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1YGCRA9TVsSAnZWagAA1gMP/iBhtkCD3AQQtxHs+NTg\nRR1HZrt8lHEIta97mE/aiypzNdV0MIW4jALP2L7xCjcmYhyeqNs2usaMnLlR\nFTUt2pEnGjoF/2zF90aBVgiEuKpT51Hc70D7ALJJeU80tClLFPUTZ2LyWyyT\nolG8dC0eBZBfYSjnC5R7tH84kcx1B5bCNYKJD36SrfmQzsyX9noTsq0xwJFM\niJC5nSS2CtVJZS1C8dPS2y/yMP5QF9umb7vWgUJMrfWNz7i7CNjw6xxF/Klb\nhwpLjNf8FpBYlZ4SWI4FZ/lmI2voHRsEeOWEbfZ5Ud8CosnXWw4GUcqW7ucg\n7Q9fuJ+yhEMnDfr3FNwOpf5PgVJENRxZKKwGs5OgNH5ST9yje9zWvVpd0ULX\nSvNYLyxqrnZz36Fc6z2vG5ZxSI6+gknRTMvDolgHbdaMBCVpO7xARZiw6ufG\nNwSSJ4o4f3/BE9P9K79SN22o+gTNKlxz7gPv4NJVwePnC66C5AAEWTJ3I42l\nr+7tgU6xQG3XItFc7tEXhwaZRZKlUPLOLL4O4xke913UU5/Z0rtBQO5GNwGL\nCmyGPo+8CQ9nZk5LwGzJX/CE4ADVCRXCWWsnOppCMlqWO6v3VvoklFdQS+G2\nDGYsX1rwjRlZ+E/5CarotSog1N+woz7j4Sk/P1ar5lTicH47hrypQICWm2Au\nCWKX\r\n=iBeb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGi8CKIU3nS0bZ38jMYIIBLO5V1xExSVHymxfz6/1NnXAiB/LvEShJhVCWJwm/JNpPo34XeabYQKRsPr1tariWhuvg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.b39fde62.0_1594316294071_0.6155995847432278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-select","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/floating-label":"=8.0.0-canary.6ed717ddd.0","@material/line-ripple":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/mwc-floating-label":"0.18.0-canary.dfdd8d6c.0","@material/mwc-icon":"0.18.0-canary.dfdd8d6c.0","@material/mwc-line-ripple":"0.18.0-canary.dfdd8d6c.0","@material/mwc-list":"0.18.0-canary.dfdd8d6c.0","@material/mwc-menu":"0.18.0-canary.dfdd8d6c.0","@material/mwc-notched-outline":"0.18.0-canary.dfdd8d6c.0","@material/select":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1F/yvxQfsLAhoOc4jxaKb6wajLppWWISUtMHE8rYD8Mg1P/a8yT3OA1lsRHS5z5Icq/BnPFoyh2zGsX6nEpOvQ==","shasum":"4045944ea51b1a9b45e5eac4fa475a4369924894","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":46,"unpackedSize":930883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2FOCRA9TVsSAnZWagAAPekP/RVx9vUM6WzgyZ8cjz4Z\ntlflCuDlESuEoLHPCQLKQ3U0CBkjV80woHi/qr+zoPIbbgbdKc8CIHUf2AqG\nFKcn2GQkqwUp0gTZlBCecC+BCLAm0mKFHJ7ceAV5rCaQxqqwZxArY/WQxqaa\n78wSbn6obxUBTUKeh/w0/QKQIq6J7SC1ztEts6gAABT8hBPJ9w5P0Emldh7R\nA91RUvBYFqTXNJDE3JSl7X14QKXry23q5GH7VCcOeFywWKrJpTrbrF4SY53x\nwsV2GT1GoyjN5f8V19jzGycewf/pEy+Nwn6W1TcQb+SwbMIEX1MitnkxQkZP\nf5USDheruLgGEhEruJAPqdMySQmu3AXFfT761ZC2XOnD/42YH7CNx2JZgSpH\nilpqqlFTELpqjoChtNtSOu5Lo2QpNgtp8vklQ2gklwSJOWaVGDB1J4MEVfEl\noX5ahPsrSCDFf7f9pyGolSJosnYnlaap956ZESYqSV5W0XDmUEcv0uDBfUQc\n6nNWEm6Kq0g+W8SLdtyDFL82zQj/z68hgEeLMWcWCD1LvMdGG7TN5iEkxmt2\nVyl8ZqXIrnPT37gnTUbixZgNiJRwxFe8xQeruG99jocu54P8AG9J8Qf6PTSo\nOXZXSS+6Mei28gnd4jv+r7zViT86iGmtL3EJ6ctmX153KAeRiouGqnTcN1Py\nUO4z\r\n=QYSY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9pvf4Ce2VT9BSJLBVUguSIKnB8AiG5cfC+GmS7p/P6AiEA+Ka/o5JU+eyb5W5mF1FqimRMujWACYz4JOpJ7+vg068="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.dfdd8d6c.0_1594319181639_0.34277343397629845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-select","version":"0.18.0-canary.11cf2694.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/floating-label":"=8.0.0-canary.6ed717ddd.0","@material/line-ripple":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/mwc-floating-label":"0.18.0-canary.11cf2694.0","@material/mwc-icon":"0.18.0-canary.11cf2694.0","@material/mwc-line-ripple":"0.18.0-canary.11cf2694.0","@material/mwc-list":"0.18.0-canary.11cf2694.0","@material/mwc-menu":"0.18.0-canary.11cf2694.0","@material/mwc-notched-outline":"0.18.0-canary.11cf2694.0","@material/select":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eJLUfl5r7f21m8s9AOo3fXrXmGxnxWBLfNqXQMEY7M9I4jflaC3mw8TivBZvP0a9xcoSIEr5Hpp8Pqc186eSYA==","shasum":"6c6698cd4310a48b0c0d4ea8874ce1dc133fbdd7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.11cf2694.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4GUCRA9TVsSAnZWagAAtAoP/iUN3CVwmMp7X2SsYlLC\nfCEGZplHRI7OA9AFCdCC9z+kflIsH2BELe15OVee8jEy/jlp4W4qKum9fD/k\nMh5Ovym8MlzLnMO5e9elmDug7/8UN0Tx2/ZTnAD2rWvLC21vIGeBOmnsquBu\n+T7b8Av9EkhfiDO4xNEN6lH+mqVVb1K8wisjX/NgMagqm0qnZF7vmsawzsSx\noO7dnkyPmqoezi90+sYr1IuQ6COMFIwFUxzO3XPh9OW42HA9qk9b6o1aAjtd\nqr1wsZhygFNbOAg55d4wmmsAi1/JjRpVWR60pcwh0TyDtjn5/E2tILTdzRPi\nV0qkgB6NkYVF5Tev3RnBaWD/RtlS11NhCwgkH9IUNenxbPsk/koKpmyLSpAh\ninvANKhfWkQlrBp1dGL7SrA4bUQgmsrz4GXL2FvSazJiDHIdshlyWiY97ngV\nXlLXrUJExaaBbHMhKnXZf08g888+lE2ENtMzuCVATqmI75WVTQSskudY8GTr\nvmQwX/TcxdWrNlE/8P08/rnFo1dsp9e5WVUvyFdhxgS6cj/grfHUaVI2U/HT\nvJrFjoeaajuqHNq64aNDZMSkja7lut3dsU5uOosiVtDeef5xo+C1jjXDY9Tl\nOMs4uayUUovhnjmVAwOReMG61r14QY2838LVCN2xDzIlWXjai0s2rSNe4/Bj\nSazV\r\n=bWED\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIfkW4U4iM769p8ar/hsUQMo3liv5oBzxEShrx+KIVyQIhALiN96oezoZECN5sl3V9YzCILswWeFrAshWbIpOA7g9c"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.11cf2694.0_1594327443698_0.3922089255710355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-select","version":"0.18.0-canary.436d66e9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/floating-label":"=8.0.0-canary.6ed717ddd.0","@material/line-ripple":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/mwc-floating-label":"0.18.0-canary.436d66e9.0","@material/mwc-icon":"0.18.0-canary.436d66e9.0","@material/mwc-line-ripple":"0.18.0-canary.436d66e9.0","@material/mwc-list":"0.18.0-canary.436d66e9.0","@material/mwc-menu":"0.18.0-canary.436d66e9.0","@material/mwc-notched-outline":"0.18.0-canary.436d66e9.0","@material/select":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-h3kYAZiTzQpR1wAmY83HHLDbuOcqbWHkmRN62eB/jcyNB6PxNW7jfTgNzIgKS4y3T4Umbi3pE6+o0mfde5WBkg==","shasum":"b73d1d7acb5bf607243f69cef894145ec752c5d9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.436d66e9.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4K0CRA9TVsSAnZWagAAXasQAJdY0fArXeXsp6Mt6p2P\nQ21P6pYVazXlCl1jp4RJY6IxMLiz4Ce8u7yLbZzcTw9BKXpeZFBqPcwQZegB\na1XbAP25xn1GzPXAsS780boFivMpKLid+yD6GSnx51/NzhVAPPauC/FgVk8l\nOQQ/KzHZ3eQ6nMKGc8onKtIQmmlnWhAgMnWcyqgJsu4kZNHX2USfENy620VK\nUWuEljWIhMVsor9PGRD5oTW9cv9uVuGq3r+P/x/Bz4bN5P5BTZJ6uNHYSjC2\nmK8MaMfwX5iyg3N4KZOgmdN2z7ZsR7U5NTcfoIrIxeC7NVZWqtkOJQAHhUzU\nQjsV/HWAVaP2USoYCUgqiYjtWGDt0W9BD9wqGSOSxRqqFLji89UUHIeBCd+o\nVtkuRbzPqFbK1qWFcpH/Mh0SWZd1mVhONYzEFxmE/TedXeITGVFOywQpBVXt\nyWCwvYRK9mVyiWjcW2G/A+txsNdYISKkyE1wygcyL5SEmgW6wBeviMKv40Mu\nN1zJ4X1AcnBa6mR/cyOPZa1cGSQUN1BY5pdxbRkZ7pMSkP/qe6ArmmhB+x8S\nssgYhy1QiAaiUqrHQhgIMKWxhIwqsxyo8PvpeCSS8XYcjkLer2oY8Icho7Cl\n9PTRs80ziQ8Usd6gfkcHs49NRqrwIPI68Azc1aO3XZNwDxP1voMF9H7D1qqU\nEOIu\r\n=tIi5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCE4y16X6IScURIZPoXOEZMeF1GVZOq37MnULlqF4xzwgIhALCND1gIy3tHHxMqt0QhdDic424bbdi3/Og9T+xUcNhA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.436d66e9.0_1594327731661_0.9169069606702049"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-select","version":"0.18.0-canary.3a44d36b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/floating-label":"=8.0.0-canary.6ed717ddd.0","@material/line-ripple":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/mwc-floating-label":"0.18.0-canary.3a44d36b.0","@material/mwc-icon":"0.18.0-canary.3a44d36b.0","@material/mwc-line-ripple":"0.18.0-canary.3a44d36b.0","@material/mwc-list":"0.18.0-canary.3a44d36b.0","@material/mwc-menu":"0.18.0-canary.3a44d36b.0","@material/mwc-notched-outline":"0.18.0-canary.3a44d36b.0","@material/select":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TRkwZvuQitNyrGjLj5Lclq3lkcoKhPrzYwUuy9HOjo+GfOBzXWzI+gEw0AksC6amQ9XXB20Wuf8OirOSygvs+A==","shasum":"53fe9cfd604130d57fdd47aef41bdfd82a27c321","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.3a44d36b.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hiCRA9TVsSAnZWagAACOAP/3uEI81hvZ33UsR9URcL\nv/RTkj7QB7V6sowCYx3i7v9MblIK9gNMVE5eXEC9N/p8oHRk5k4KUNM1DXWp\nI+87uICddBVp3lTaKG8dsE6/NC4q6hHeC9XzxojzbMXd5u7xRlz4Il0cRbeA\na33nQMEozg0NeCOKABaYOJAk268h+I12fXsGNf+DIDHlu64RDKStn+6vXtYI\nW4/MxyYXaKrkDFbhYyAECr+l03XC0YgZpmBROvHmq78B+Hk3kA9Jjl+W+76f\nB3LYnvAyXT2pjpIzYsgMCE3K9Exb1JjKwKkNnRo7L94tqsSGvcLIGLrXUD/d\nMBJyUoVrwS0DytMMdSsOv04S3b70ya1hCzuXI+gLoHtUTfYfqzLqotIXZtlX\ntcuhOkBcJzzoBJdlxEuYoK7OZf8Bl0rsJb8EA+ttIDZOq/N4PwneidZxDLYc\nGAaQIDb/V2DjlTqSb5UaaDqHq4w8VriAG2bXJQpGDul7uD2afZNZGXOqlLgL\nFLRUYqDPzzMErwdSPtfPgkvRK/LKR0wOYtQjGbgOT5dmnMI9peLRXBy+nPrI\nwvje7sFmSxtm6A4PyvEFqkPuvGSqyBsjxyQXaxSRF5nK4R79Mva4pSmL96TI\nRsM0mYGA9RYDwYUNWLOLLvf06HGLdTYz7CJ+ZorkBGZvxYnvyVsHZ1i5+Oi7\nNOpk\r\n=ozfZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmLPfIv7TflGJQkfbf4gYXF/bmFRmJl2kGGpfavl73UwIgCWgXFwlaEpPPHLJCgCoR+on2QmEgEW6uWiCISRUR3As="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.3a44d36b.0_1594341474042_0.5945321088247277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-select","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1e7cb6198.0","@material/floating-label":"=8.0.0-canary.1e7cb6198.0","@material/line-ripple":"=8.0.0-canary.1e7cb6198.0","@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/mwc-floating-label":"0.18.0-canary.ec11ae6e.0","@material/mwc-icon":"0.18.0-canary.ec11ae6e.0","@material/mwc-line-ripple":"0.18.0-canary.ec11ae6e.0","@material/mwc-list":"0.18.0-canary.ec11ae6e.0","@material/mwc-menu":"0.18.0-canary.ec11ae6e.0","@material/mwc-notched-outline":"0.18.0-canary.ec11ae6e.0","@material/select":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wCiB+ZKmv/nCaMjMRQHDEvaXHW2u9g8gEkFrE6TPKMjQgb3TPJ1RALxNK7eFh75fvIeB3zq/gkYNt/a3/qSCjQ==","shasum":"945fbdbe2b2c82dc836bb8a401941cb7630f7eda","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.ec11ae6e.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKsiCRA9TVsSAnZWagAAfQUQAJ2SbHu8R6FDp7dA8qCk\nAKHuRbq4JbaB+DHqbDemkezu5U1FKADHRsN/mNEi4wdC2FyhNn4bCzAloYWX\nNA5DnybGW6VUUznEfMBNSMCzotwk/u1d0hDRo/4q566bz9QzANikreR2f/p3\naNnmFCQgLsZKkqgIsas7N0jfF526RjJ6Owtr5CJl5TxAuYDoGdOCTbQ1EsyT\n6nGH/uVnKghptYjhWkEZ+zCMSuS/h0r0t0Xg+Cg+IyTiVJnsP62s0ywAPseW\nUjTshn+MYGHhTL7gjRvqtOMdLVdgr8ghzpfOunWKlxlmO6sU8oln0tAnPKgl\ntWvnJFGd6vNJvckH5VCHP75XNKJLq2HY3mzg9596twhVoLkZybdAT/pqTlls\njPF3EexCCUD/w2KYSFtg0Cjr+Y/bFJ0KQ4KeChBcfHoXIYw4Wj+EDLVSGh5I\nCnSlr3PmIWO4KlbLeSS/5US4V1Ep97AsunWxt0MeTma9CdPXm+VVuIlCDDUF\n9aNez7X1HKSeJTw25RiL2vCOAX+1g4kEo2Kws6T+HixZ2zjF8JzPpFoazo3E\nIhDiGo8/yKYVedz8B4UujJeLJC0GLJtGu9b5FQpO1gdvJYA4RWi081YntlSp\n47K6DXiG9mISzEZQlceKlnBuLsOG7tyY+WrCQARKWtPUIeYTIGcJrsPVQ4Jc\nByUh\r\n=P1mU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1wpPRtwUtLAUWk1ytIC/VGNYLLr4FGr8z0/SdCIIQhwIhAPV34lZ5NYb9VZ9zdzaWwDw/6YVMFS0QOmOmeRw06vp+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.ec11ae6e.0_1594403618416_0.24132303590516235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-select","version":"0.18.0-canary.17f6cf27.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.b2edaeead.0","@material/floating-label":"=8.0.0-canary.b2edaeead.0","@material/line-ripple":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/mwc-floating-label":"0.18.0-canary.17f6cf27.0","@material/mwc-icon":"0.18.0-canary.17f6cf27.0","@material/mwc-line-ripple":"0.18.0-canary.17f6cf27.0","@material/mwc-list":"0.18.0-canary.17f6cf27.0","@material/mwc-menu":"0.18.0-canary.17f6cf27.0","@material/mwc-notched-outline":"0.18.0-canary.17f6cf27.0","@material/select":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-q7wEvCCmO6jcfbeyTncCY/xzyQ0uqLKn5P/M0pw0QDzGsnj6YiRDqBwsjCl4ptoNkuuWf4FGPJ+4ItRpmKlZng==","shasum":"4a2a839466f7184a6524084cf2b3a93d4f50018c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.17f6cf27.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRwCRA9TVsSAnZWagAAcxcP/ieGHvHQPGgLsgDmFvwG\nTaQlqpnUBIlVtqxR5jkGKV7MGcFiNvicYRedGzQ7lwXGMmczquaARJ5T9weA\nIhfYFJro8Sjyp1F+ONqAWxHct6oL2T5bh1F2jSRAbEO3Tz6Tec5CXfMeQPoK\narBNCKktoVisH/Ne3vAIgKNNYdRVofLjljQkOD7aX73ot4eXJjeenz5+Zemc\nHr2E10oMCF57en3YI8ZVxxCk1jdTHJrQ2NXXpfcjYYwIHzUP7iZ938ZcdWA1\nvPHDsFY5Ci+3gkScwfjCKIYCGBoqpmCcgmakJSUX4txaH5HoM9Lcpcy3OSlt\n7qklMe0mLsH8rcSauMImc/aynADLx/kRwTvlRBoT279ag8G9PE1YgIBPAa8w\njEHo4YQDMJFE++fmUBcyplPx7j6ku89lQOOvGm5uVR/18Ij/IrnLT2PA2LsX\n2GaQ5bJ0IAfI8oyvcQt4ixoKJgK01pcxWNRgWtSve+yGjRGT1o6S/FIpGIBW\nyJP543XBe3Mkl21x42A3kd1cOksow4HXl9qST7Hlk7Ca20aRj0EYtxEoP4rP\nxUYbvCL3Jr5VxY/n3bpnX+doqkTGAR1wBCI8luYZEZ475EGJdDbQL0NX2trV\nlXUYfZH0/Eef1sVD3iqh2TjCqzlc1GcY8PG+p4Bmhgv0VfAD83Hv/mg7qtl7\npfCI\r\n=Rqxp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9k9Cj0iI5/KwFWhp9RIiftuKaDbQNkgmDoE/t8OdBlwIgZVBcb3QnrriKkpN9CSz34NhtRreejNKdbbFkWM7QsSw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.17f6cf27.0_1594406000517_0.842128342140958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-select","version":"0.18.0-canary.efdfbc21.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.b2edaeead.0","@material/floating-label":"=8.0.0-canary.b2edaeead.0","@material/line-ripple":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/mwc-floating-label":"0.18.0-canary.efdfbc21.0","@material/mwc-icon":"0.18.0-canary.efdfbc21.0","@material/mwc-line-ripple":"0.18.0-canary.efdfbc21.0","@material/mwc-list":"0.18.0-canary.efdfbc21.0","@material/mwc-menu":"0.18.0-canary.efdfbc21.0","@material/mwc-notched-outline":"0.18.0-canary.efdfbc21.0","@material/select":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Y9hZDAyOagh+1u3sgxDBNruyRtfN470Pq84ELFtXbFp85MkzqkCgY5wPeZbASafDtkl3HPgvWMf7PD5HVc5+HQ==","shasum":"600f92e550d74d2c974c8f062e2633a2b32aa089","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.efdfbc21.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLc5CRA9TVsSAnZWagAAPjEP/AoyAYcQRHzO8az1N39e\nRv8knuYDrf8ZiP3UItUS5ot28ZAqIobTGBSs8hur7aQULn5Ww9MkFiuuX0HN\nXW2XaKzJpMvJR2m1C1n/50hDC/wCRssvB6tsswGssFjVCCjoKmZmo6byfmk3\nuF1FwKkqOyHKbinlh9wItIxRC8/NoMy3LBg43RLdw/J3xkXQgyyoatx6kG/A\nA4+mATjj4Qgk2CK80HARV9i4r2eqdBBaRqzh040JIyzr1mVGSkNNuaPLmM8a\ng/lxSAX7VXYj9SABSGZ76f3Mo+23qxxlzJKvfrJFYD/a3hA4Ty0w8kKRqhTp\n92AktNlWy6O9RpqcTzyOXdOvPtoE/T1HJyoDnl2g2P3ZSM2gR9dpSs/zgoL2\n/Mgjd/4lLSCUghcS0Nd8qVLI6uYsFHqH1tXnAmIVKBfIPw64NZqS2Q1gumNb\nDadKfQgrEv5Evs/i4BJFc6cpIVQy58I7JYHwozkhrSkHrqCQz15qkXcQsFxa\nTK+x9UbchpYgmwhDIq40PpfOesoWYSB/k4AL6+dwWp/l/JT00YosF1PGaOLu\njuZrgHcVR00gtcuRyYtpVsyMDDMpkp3ViC4rqu8E3SrG6NMiL8u+WgVaFJj0\neFC0Jfh/qykxMu0qTs4hQe8EysAjmm/WujCopzrIIb6vSk6c0zHEUtXAvWQb\nQyIy\r\n=i9Nj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG6B+Vf519xXCi0b7EByP5YpX8YiUuj4Piab2AKFiXAUAiAUtnMEivLW3d1hE9Bk+mvY1oZGHqVXFwmd3CEmDYTrJg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.efdfbc21.0_1594406712967_0.27033042432910226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-select","version":"0.18.0-canary.bae4339a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.5dac1f624.0","@material/floating-label":"=8.0.0-canary.5dac1f624.0","@material/line-ripple":"=8.0.0-canary.5dac1f624.0","@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/mwc-floating-label":"0.18.0-canary.bae4339a.0","@material/mwc-icon":"0.18.0-canary.bae4339a.0","@material/mwc-line-ripple":"0.18.0-canary.bae4339a.0","@material/mwc-list":"0.18.0-canary.bae4339a.0","@material/mwc-menu":"0.18.0-canary.bae4339a.0","@material/mwc-notched-outline":"0.18.0-canary.bae4339a.0","@material/select":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jSDPMI1sFFMphmgUkLfYTo8I44xRduxqJ+rvRvOKzEWieGXyG5+BZSFImklC3H0PwTYr2kzhFP44zLXHrLrgyw==","shasum":"63339844e71f96727d75493ced64e92888eb0ec7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.bae4339a.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeB5CRA9TVsSAnZWagAAMdYQAJCrpW7Oc09FlRSY0zDW\ncgMsY3YNBUTArJVLzp4OlqKhAM7CIEDTBfUVY5MYzzuwtfz+ybtRlpoiaNSU\nNrlu6vWN1XTQlMKq25xLHVXk2vQJIZOyDs1RPpAYJPnaLrrXp6eBiKMJm52L\n6cdWBHa2Q0Z4VBTujCh41uqltVBBpiQ4JGb+E8TBqkzJq+vtR6LIIjZ0Y063\njjgDEvGkmNyhdGw6Pqt7Z2JM/UfaWFKemItN0EmnpSRGvq3N0znf5KXMsnza\nTep6dwF6UzXx1PDNlm4kVfUKo5uMxtrCYwQF18k/mcwPZoCKzabnpboSfEsk\nmAjZJTr71UmjSElBbZWNaUfF/7LiXTF0YH0ZJ02KwvurP55xo7U3D2GVXYjQ\nvRlsXSGfJSHvpTFzNt8oNFkrkXoAn+G92ejlfDZ1BGX5knc445hcPrfS3rku\nM7Ts2+oTSDfkgsYVbhUZ5kDUakIWjBV/CFMuw5DHrRZOhiCQCMFBvOpO1AkM\nBbpWjwMbatuGd9FUyU5udtocOe+F1k+YJBPaqPlNGh7RJ9NypzMgMLkp81ql\ngx8lB37S1KTZYiykAGCD2Cx9eV+BRMPxhClCAg8VySm5jJ2259AoTSIFehU9\ndCoCSnqRN7W8DRR/5eYs9gzgWhv2fHjmkBjR8SilSU2rwEyKEI9WDpSRoQHq\n4TkP\r\n=cofn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbPuimcCP3UYoA03h0CBOI+0BqX7dvvYG7jTeMFaBftQIgBbBdq6TMp71DZYuvCk71uu6eSolt8Xk/vPvoY+JbOQY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.bae4339a.0_1594744952678_0.6596761009566505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-select","version":"0.18.0-canary.28eac13b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.e6e23019d.0","@material/floating-label":"=8.0.0-canary.e6e23019d.0","@material/line-ripple":"=8.0.0-canary.e6e23019d.0","@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/mwc-floating-label":"0.18.0-canary.28eac13b.0","@material/mwc-icon":"0.18.0-canary.28eac13b.0","@material/mwc-line-ripple":"0.18.0-canary.28eac13b.0","@material/mwc-list":"0.18.0-canary.28eac13b.0","@material/mwc-menu":"0.18.0-canary.28eac13b.0","@material/mwc-notched-outline":"0.18.0-canary.28eac13b.0","@material/select":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wMfiPaj7YVee4fk8JufHpc8jYKwI202YpbO4xSVTqZ0gGb5iFlfcUl01Zv62jrKBpPaO/5I4eDf/B1MxICTAhw==","shasum":"cc8d81e3ed9d4f4779eee8de62e4312834ed82c1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.28eac13b.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjCFCRA9TVsSAnZWagAAuk4P/2KGRWIKps+YX4zSLDzZ\n/2DxpwuqXqk4b/7ijoWndXO/5fST0N/MGEkVKUd9vzTNecWUao4E1qQi65Dt\nmmkii8fB+CkE3tohsKcF3CDX2KLDGvB2fYrQg180XIbVAe4E93H7jsCuOYva\nFmQusLTny3wR1hupw5nVtnLrvznTm3jgz3x9rTDOog2i1iARRoej4znzj2KZ\nDQOZa0X/CCzxCJxSufA8EF1MQWEvN4U9z7ms0RewFITl2B5VC+R0IpBjrPtW\nlfwfk4jYrlh0weiHm8wQyTadoMhoYIL5L0CHZfYd/JKheNAlaQ6WTX+2Eq4v\nNnEBRfu5k7mZOzx7mt9EHT1Kfan4S80SuMjXnChnM243qBGWfztV4zOI+CFn\nRfzUc3zd7fKJBJy9UUpr6kT/LoCKDpY/8currkMe/D78NP7KU2Eo+k1hEgwv\nclJhWBJsPk8iZ7+qNXsyBipsRkcfC1TIJ7whIonSrlhyyMbrWSb3hA97HdHy\nJslqlhnimHzLS3louTLx7byJU6vSft+Pqj45XfezNZNWQm7VjF1+EN/UfqD2\nGcacPenDHyuz8Pg5DktmCNOH3os3RKJ2yWOvxs7AVzB98xyOMfbcotjB5MOZ\nsL9mP9j+XTLaOYNWkobihEbA55SgK2soiFWMfbLwT0eOXERjKe14DQaDz9G7\nbizX\r\n=IXI0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpRlcOs7nXGlx4xBCuOERZL5fsqvnTKum5NGiVlurtkgIgEScT7y/OTQhjYkKWyc76Q1AiahGaWkq5Meu/xnaGuCM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.28eac13b.0_1594765445237_0.9278723673733626"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-select","version":"0.18.0-canary.44966b65.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ad4df58c1.0","@material/floating-label":"=8.0.0-canary.ad4df58c1.0","@material/line-ripple":"=8.0.0-canary.ad4df58c1.0","@material/mwc-base":"0.18.0-canary.44966b65.0","@material/mwc-floating-label":"0.18.0-canary.44966b65.0","@material/mwc-icon":"0.18.0-canary.44966b65.0","@material/mwc-line-ripple":"0.18.0-canary.44966b65.0","@material/mwc-list":"0.18.0-canary.44966b65.0","@material/mwc-menu":"0.18.0-canary.44966b65.0","@material/mwc-notched-outline":"0.18.0-canary.44966b65.0","@material/select":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-SVCsfcHRFXaKogHJOFkNhL4nIXAJQTf9uuMpI5EjbsXvgYSWODlJv8ENIDXknf8cRt6GdRwaBqfu/HDXQODksA==","shasum":"539cd0035f3f2561946a62eccd937272a2cc2813","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.44966b65.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VwCRA9TVsSAnZWagAAFNcP/1DEXb/vvbvcbQ4u80BT\nozEk4uJiJgCCaCtgELW1+vPMMBl3Gk9xBmeYnlnPJD7XzhdkbxtaHccFiGVA\n/sXMrracCbCRvfaCdLukBvJXsAiH1XURJ1b9DhrxP10KHquzayGldtlZ+h3D\nyJxIduVNqgpf6suLPt/I364mtz2kI+ksybNqVMyE0oazc1M9MrCNROm3pCtC\n3izksjYFBb/QTVwFzXinsf0vOfqqXnatwCpnWKw3ajv1ZZMluCg33/2uFo0J\nvCByrtlPWs/HiGBgdgY3NJvb6N9ybiMa/EXJzMutt1jZfpK7dM1Heo8aBiBY\nnFfYa+4iNV/rgAoIv0fqdCp3TYYgol0mvNMpdLApLH7Va88bF3QGeDZvCNa/\n/TP2MUNuEyOFb81/5jwx3ysyX49iDS3JbHh2LkdI8S8X4ZQwIlERgq0o9W0e\np5FpgRnIwLMIZu100gGqfOfajxHIlTOc2yrYTlCPFcvi8Lya1uOhKjkCNp/4\nii1ZpkjQ96DE+38De4RzDRz90SJdrlEjh1fvFwZqleugcr0qRmHlB2yz9LqZ\ncmdbMpwLGOus+SYRA20MiPzmfdZDRjwSdZ3fGYXuSAReqhPICtmnme3nY9Li\nxQk9XTx/8ViAMfPZ1X1vXI+mDmrW2L9TNq7pu4hsefTXxrSTLl+xZdUdnGIg\nYSig\r\n=+dLk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHbhz72gYRamwoqIsXquuk+v9hPOT81R5oGhygu1uL2UAiEAiCDKX7BMVYb5Axd9yZFpTklVjoOehVuvdmGnuB1tkPU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.44966b65.0_1594836336116_0.7891522803588809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-select","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.01db89053.0","@material/floating-label":"=8.0.0-canary.01db89053.0","@material/line-ripple":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/mwc-floating-label":"0.18.0-canary.3ef0ef60.0","@material/mwc-icon":"0.18.0-canary.3ef0ef60.0","@material/mwc-line-ripple":"0.18.0-canary.3ef0ef60.0","@material/mwc-list":"0.18.0-canary.3ef0ef60.0","@material/mwc-menu":"0.18.0-canary.3ef0ef60.0","@material/mwc-notched-outline":"0.18.0-canary.3ef0ef60.0","@material/select":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-oy2nMKOd1ZUUTz19pS1tznwyl892tMgBTFxIt7EUJ36xh8oOCqQ85lf7J8U/TTJvasQJ567wbSKjGcy2s5dg+w==","shasum":"d27acd1dd3a4d09df27c8ea2d957ecd93a2d0a14","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.3ef0ef60.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZ8CRA9TVsSAnZWagAAthoP/iShEUpnOhjjjJcmDon3\nSasX000ZjxTdS19Tl/RvU5+AAiocApC0/Y3xBdrk6aEkrmUwPjwuL54VmlpS\nloH7UAXByIg1oQZEmUwp6ZqariVyQ/+e0g+iJ1vdW2SKOeC6aCq1G2gMVnGL\nNuz0+lznew39MDdzvhK4hpR7eGjUSDN0goC3lY5P5p8v9euBor5O6M5tQl70\nq+oKEgHtozxuZV3jS19W2mSJQHM85Y/yjLFrzX1sZJ2WR+8c5lq8f3h1DCqV\nhmgz8V1nCz+80/UEP1iYOu70gLwNJ9UzSVAzWRg2dmR3ZLtizpiOEJCGogtl\nvFTwBc0q1UT3z0m83y+BLNd5MiuXVQZqu8fP8qdvAyOpNfwkx2glxsProqgT\nMolJHBWTwCFr50se7kcdMcf9kNaMikdlwfh1/44wiWeytJfzeRKJgpTH9Xgy\nkWGnk62vjP4V267SpWTVQkp/Rx0rVyxYU0fxpLM42MIY4YVKL/zjp2BQRijQ\nAuTKnXQWMODA+4PuTQ667Cq5vGKdlEQhD4fD7BQdfI6QBdQRvP9ehX+S1i9N\nI2BA7SqWfNionFPtoeXODHpCPBchu5uLD1+xwKhoH3/EfUPccz74UY0Xbjwy\nmjOjWP4hGzIZzMlhWQOiLV6AVCI7xedzbaEVpcv2KtLabKe2Gw3djh+jLBwU\nhb1I\r\n=Gqi9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe5lL86akpkG2Nqa6UQCWAiblONRv16sxAobOc9GVXpAIgE8ro278PwD7DF7xmdgtjqQIzAJEeZwMDGEmaotPQDP4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.3ef0ef60.0_1594918523973_0.8160727600962703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-select","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.01db89053.0","@material/floating-label":"=8.0.0-canary.01db89053.0","@material/line-ripple":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/mwc-floating-label":"0.18.0-canary.fcebf9e6.0","@material/mwc-icon":"0.18.0-canary.fcebf9e6.0","@material/mwc-line-ripple":"0.18.0-canary.fcebf9e6.0","@material/mwc-list":"0.18.0-canary.fcebf9e6.0","@material/mwc-menu":"0.18.0-canary.fcebf9e6.0","@material/mwc-notched-outline":"0.18.0-canary.fcebf9e6.0","@material/select":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CGsp08dKZl3yknRdquJ47Kz3X7+3n/qYTeGzb+oCV/bEsssV32OfrshBTnMKqZZl7sN1E/6KZZppZzswBl57JQ==","shasum":"00920651649d632d4cd5beeaa84954d16484733c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.fcebf9e6.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeaNCRA9TVsSAnZWagAAXqgP/0BHSnn03PO+zW8a9kyC\nYBJWN+efX6uH5g3djkZ4aOepA4iOgnOKXt06z7esORiqYC8FPGBHCfkJfYsJ\nOcTqbMzorYaScM43g3kFzDkjdUQ2/m4c75dSAckIyWNR7Gn3E7h+levWups/\nxd65Gf8OmFfhof4d8hhIIhgD32Lq+KX5AQrMptU1P7hWuaHgSymPSpv0S/p2\npfgVBlZLqljvz1xtkJjY8NGd6b6b1f7In+gT2pqWXITHS6eCC1ySGpk1n/77\nkX1+KD7+akPPeqPrLXgOwI4j84cnmgIbfFMKBp18/5ZZPuOpO+7Qc7w68z9N\nLHWYAPmIGC/I6B5PrT0Xv+D7mKC3a71dKCTxHx35t0tb9+PTFTWo27DfT1hY\nwfvIL3qjbO3JKvEi/pTYWHbyWDMS345f0I2m5bQbMw5EjebwswRGz/PDbEf4\nVgIfXN3ZgB3BjXsz68Y2PUNEsNaNlqTLpln9GA9pRHeXGJij64vay5WZTros\nBzhZkfDrDm/L4vjho3KK/wt37UTKCK0U8qMGUePzpWq1Pt4bK1fyL0Hpmfdl\nAQrhQROLXuuOyu9cVKmEwlN7r4wX2jKqVxfdXbzH+Dr0MV91Tj81igct/GiK\nown030J7iejjBLN7CIWjvvyqDMLwXy3z5Oqc/kkHkOw6jKPTXlGn0UlT7Nzm\n0fx3\r\n=hiE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJ5C2WyFTZ1++J3jov4P73zk8eanoiAjMRRmRfWY0sGAiBUw+KUNvQV60YX6uiqDlcJHD+f+37aN07Mn9IjBxauAQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.fcebf9e6.0_1595270797317_0.27296088390940976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-select","version":"0.18.0-canary.b6a772df.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.fb5a4cdeb.0","@material/floating-label":"=8.0.0-canary.fb5a4cdeb.0","@material/line-ripple":"=8.0.0-canary.fb5a4cdeb.0","@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/mwc-floating-label":"0.18.0-canary.b6a772df.0","@material/mwc-icon":"0.18.0-canary.b6a772df.0","@material/mwc-line-ripple":"0.18.0-canary.b6a772df.0","@material/mwc-list":"0.18.0-canary.b6a772df.0","@material/mwc-menu":"0.18.0-canary.b6a772df.0","@material/mwc-notched-outline":"0.18.0-canary.b6a772df.0","@material/select":"=8.0.0-canary.fb5a4cdeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6mTMELBYUKMtFiFBlvPJt+ti7pKckoTV6eB8Vh7107n94ojkf9akQoydEq7e0NsQzPzSIFSvOZnM3FyrxOhEcw==","shasum":"f3856d35fd0ac41b24ae05e7d4e15efc68435455","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.b6a772df.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7tCRA9TVsSAnZWagAAK2sP/3kfblBMrcyYbdL5nr2L\nSvPPJkbXbkBxx5UGety/A5d1BeKmwS78EXnVIxsmAKZIWwWp3Hc2SFoncYfN\nA3O1H6H1eJs6FtkDi7vq3zU7qle9wdDwXvbFH9qjSWx8rwHChzWyKsypEYb4\nrloyqVoM0K6UjY+GSX/wohLYul5Q6JhoA0yMp2h7Phop0PO0rNzaBvqsKjBg\nUq8+YVdgKQLC4PJZO26TCjGqEKvLRQB3qrEp7zAytI1+SdWtiHXZSUxIq8II\nMd09oDqwFMkJ6EOdM2RrohTXzPD7M0X0ilBLajcw4kf2DbD0wnbSjkrf26AI\nsqoAp5USm+xyc2eUI/M7FNIlqwozzLmY3gpQpadq+8mgPUzvNto7hMQOPUDk\nvL6tIlDHk4yF6M6X/onTnldalLg0nXJR6NdyRR8JoeXTWX3MZbHMWvCXqQcY\nt/peHKSr1bcyVG9FfPEDFSY8tL4E+EGiOiXhHz9sFvYZE+6BDRXbm+9SCe11\nDogJuJqwQhWhcxC6TWZYqTW1+MvIAY3d+b1WNVNCyMOJkrQSdszDamTF/Jw0\nBnE+tMFfyq+dRwbA6YMxeljFTN6FTyCJ/V9CORK08MwNn3oTEqxP0Naj91lG\nJB00gwt8SrzuDWLmg6x4X8oEgxFbAFlSK7c0ZW2MC+XAQwUmAyG9d5QPCwum\n+t8K\r\n=yAaU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPuCIHbsYwLoppqyyS8gx07ORHC32fWu4roTtpeosgJAiEA3Iu3H/nrQ9FQDNA0mamzNhWUaCzDJv9je8iUi6l1j1s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.b6a772df.0_1595285229213_0.6597118144741894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-select","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/floating-label":"=8.0.0-canary.abcdbcfeb.0","@material/line-ripple":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/mwc-floating-label":"0.18.0-canary.f6a6ca38.0","@material/mwc-icon":"0.18.0-canary.f6a6ca38.0","@material/mwc-line-ripple":"0.18.0-canary.f6a6ca38.0","@material/mwc-list":"0.18.0-canary.f6a6ca38.0","@material/mwc-menu":"0.18.0-canary.f6a6ca38.0","@material/mwc-notched-outline":"0.18.0-canary.f6a6ca38.0","@material/select":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+ADJZDgf/HiuDPuuFsKLwg/YUr+s3+ImInCAKidQjBDTou4dRuUJKuCiiv9MQDHeyAp6CUjKDm9rzcj4YeVTCg==","shasum":"4b3f8910fa7794eb12683cf1a2eb89b54d5b32e4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.f6a6ca38.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxq5CRA9TVsSAnZWagAAoggP/0u9BVAS0BKm/CaKxkSf\nauGQqq4uE8IklHN4YLfmTGCAYX9UiNmZhwZxdni6HLykkzhzqWYH65mj8KL0\n+8jpVMcllZDR0mpmeDHAR2cM1t3XTAAt/3Jt4m+UFBWMKT2jyDe6V0tSlb93\nkoaJWshyk1OS/HOPZNtuetgtBOQzYxSGG1YXX0a8RrnT/tumyFZ1dRvRpyWV\nVlYTHY8uIXQY3PfA76XsAlOktHkqGfP3AoxSCnkoYKakn9LitfgMdIGpP5cD\nOZx0MKcsQcpixvU9hLBsawsVruy+x1426BMNB8dAWaCG2PP4uxknpdqUEAuC\nHQj2UqeR1XuE51JeEURY4wg40j3N29LS5Msi5xR7MsYHfqEv5VnKsw4X/8uL\n+R4CdHwzbQPT8lxkWlje7x1idPfgtfuXMuz9jEPIHhgpNNiPwSmxAv2gn1JR\nRzJrq95z4erMu0/4KU/kl/1YCemwlBPqW7mnMRtAF8E4t7+x3DIog1TM+k86\nFdV9VMLDHUWLsw2sMjGCTYfwiY0MwY1+hB5EaRm5ewh4bUPzmvdsKCOeGvMx\n1pNc4xewaYRI8AE0QrzHKW22G86TYUvReuI1owWaT5sZsMPv+58+BEVPNLni\nSp0ZFaszZJljHgXOLYGWUIB1qbTJaaX3HdJOdLaIb758YbNjZ7mwmdC0W+bS\nf1Hj\r\n=WNc8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAer4zttdLg0AUnQzV36Zf/pA9dNT0LOLMzK0kuTifIwIgMnH3z8E2fOqPUGnZxv7H0TtMTQXsO6UDTfIdg3tChoQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.f6a6ca38.0_1595349688972_0.9226939077979945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-select","version":"0.18.0-canary.647dd6b7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/floating-label":"=8.0.0-canary.abcdbcfeb.0","@material/line-ripple":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/mwc-floating-label":"0.18.0-canary.647dd6b7.0","@material/mwc-icon":"0.18.0-canary.647dd6b7.0","@material/mwc-line-ripple":"0.18.0-canary.647dd6b7.0","@material/mwc-list":"0.18.0-canary.647dd6b7.0","@material/mwc-menu":"0.18.0-canary.647dd6b7.0","@material/mwc-notched-outline":"0.18.0-canary.647dd6b7.0","@material/select":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ULiRW010+RetOfm9CHDggmNhfQdmQss5Y6F3/xk+ZoIImqPzA3mh4+3aHxjSDUdgtf9Mamf81vUrTMd0J7z0xA==","shasum":"20d7670659af246e910b7c5e73ad1de404010ded","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.647dd6b7.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFze/CRA9TVsSAnZWagAAbO4QAIrYNtMcLRk4t9FWqOOA\nW3tc2tYmmmqsBpkOo8rSeT+W1dbqPTB3KYcbijiOxvZAPmg5bboabSL6PjLl\nkIFofrfCYf9FBOiTMMCtw0xlabtHEayQSkJL1TuhmBF87O7F/V5CkDZtD6AY\npsGtUDlfXbJwK4QtjbnHRPtZxf9dWfTraoIw+R5gj3vVNI6E1yxceAk6Oc3h\ni6LEz19YZAf3VbvDjaO73uLqj6tYelWW++8riM17jT+efUxLA8Jo+p4x2Lmr\n2NAwLDg0lvpLYBGWLuVbhQNQ1mfXCXJXPUZAa4hUwgK3gUVvbn8vYAgDYu/z\nNT62IZrsrv2P86ClnuRMHbqB/IQDk1XVCvx1C9HczjiODtRIywJcUBieHWrZ\nvr2490O2/ShVvPGKoHwv1fdGIB0TpVA4a8iNHjlwusbGqs9iRgqgxZ04WiVc\nlyChOe5nWIqh+EZRnLEE8B7Et3GHdLPry1bYGkEGlZUYlsUuVfokwFdsxE9H\n91NTRSNaDcJ6RYEAHrcDX0WtFEnKI7gr33BtBS1zeux+/6M1VZIKTlCr6wmA\nRc1uCUVSqr/SVGAjUIo2q8yqrAXJV3jgkfivTcVhO1gnJrPdR6qZGhHA/Brx\nZipl9w03oqOIOsxEhyxwpgrEHK61kZacfxVN3VchHefg4Y9xE0dpCtulAwFh\nJq8l\r\n=pU4U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvJGgJW1HZI4dgY7+ghx+QPGYjfdayEmOhOIJ/xdW+DQIgYAyfubErp0hjqWNCUTb8HB9HoeFpy2DpCJBHuNKmRHI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.647dd6b7.0_1595357111692_0.5599807558594256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-select","version":"0.18.0-canary.3cb7406f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/floating-label":"=8.0.0-canary.abcdbcfeb.0","@material/line-ripple":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/mwc-floating-label":"0.18.0-canary.3cb7406f.0","@material/mwc-icon":"0.18.0-canary.3cb7406f.0","@material/mwc-line-ripple":"0.18.0-canary.3cb7406f.0","@material/mwc-list":"0.18.0-canary.3cb7406f.0","@material/mwc-menu":"0.18.0-canary.3cb7406f.0","@material/mwc-notched-outline":"0.18.0-canary.3cb7406f.0","@material/select":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dz9pDX7l8xuB8S90/ETirNt+HwVs3zwn4Vh7psTiawXCmSWtTNhyvr4eY57dtzkR2nbRaIgdzQfXKzyRvsJ5jw==","shasum":"fd576b1d17c44abfb4aa2abc204810395f1b6ac6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.3cb7406f.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIw9CRA9TVsSAnZWagAAABoP/jC3mGbKtxheOjyUD4cD\nwlWCw++MjN1dQnJmcv6CyqsxGuPwvXibzfFhvDjuptyWAEeM2mYU73bJARK1\nyrKIxFzaChnPaa31GfxjfwWL0QZDfRM+NDIG98LaJiHTmx2GP7cE7vGne/f2\nHnzru1Vig8cCdnHZrtfyqaenHNICOOAkyVNJAaFa1qW2CStepGTYMJV5XNE9\nfhBeYZC+WgG55Vn/s1yo0sYOyelvBtbSoOqVNh/obKD5o/n3tnjEI/oww6HW\nGYWEnGAdSKhGBp0aD1nb+0gUAuzGrvXo+D4zjNP8xgTjwTFMDlXblzGjBn2b\nZEqE3C1FxbRFxfAVZzjBYl+IziV1NJZPBiUUUmDo+3vwr9YWyEAxudkhQm98\nLyb6BXUyjJS2LGrg9/ZakrHm3nKHY7bHQjU2ZnISOV+2/5n/daxWGZHEuzzu\nbKVpbjnilGAk5Sp9ks+PsO2EFfOCEDI5x17UUeZk935qGI2n7DxkPuvwzxw6\nL5SnZ14N3bcpx9AQMtJhx7jh3OGPYuZcHaqPOTWkg1GAZVXndbDl5JV8WKxE\n3qOqAiHeHXsFIWtye0TPHRCOGlslLiY/WwxPbhTM7di8T97H4H3p7EBiou0c\nsnHp/cS6nBchjAntdQMVUPXDOdeqr8P2Fqb0BG8wZc5w+fNYrZUmOxWfaNii\nw8+0\r\n=dSM8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIDpyTPwc9aiqsEEzCwhnH/TRS4y3s6UFN68ltxD/DLQIgQ2dEK/8YZEjPLPdJiRVk36i78FAfEYzp0dMLO8SPNQU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.3cb7406f.0_1595444284585_0.04090187452443739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-select","version":"0.18.0-canary.5717a5a1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/floating-label":"=8.0.0-canary.abcdbcfeb.0","@material/line-ripple":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/mwc-floating-label":"0.18.0-canary.5717a5a1.0","@material/mwc-icon":"0.18.0-canary.5717a5a1.0","@material/mwc-line-ripple":"0.18.0-canary.5717a5a1.0","@material/mwc-list":"0.18.0-canary.5717a5a1.0","@material/mwc-menu":"0.18.0-canary.5717a5a1.0","@material/mwc-notched-outline":"0.18.0-canary.5717a5a1.0","@material/select":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-bt7t5llbFZPyP28mCOZqDp282E7f7cHbonzPucVaMGtAUrK67xZf+ZrdCcLPwtV6mvBzzm+BN07A5CtPRvdHbQ==","shasum":"cf41a95a71425d31a6317054ecdd7f3480338c7e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.5717a5a1.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLJKCRA9TVsSAnZWagAAypYP/jc2oPEoKTh1W3Ia3zaK\nSHcx4U4EujbJvRjkBEKw0OLg/QM55+dTAOhq87C4GSVY3szX2p2jrUoHd672\n/fSh7/LPlSx3OaW2jsYVWKlItxreKQuiUqfM4/28VYWLSdfrDTscGTZUzcL5\nYA/EK4FIwIyCtUeie39CI5pyBzsSF5qWE+/DyMZkTDqqIjBjVfsgVg9pdsd3\nhGWeC+im1twX2N3dj90SRAqDxYgbZcG9cPiwWCRNy0yhwKIhBSzSLPdvld6Y\n0r/rS3mH9Tdq1+kXxg6SjRwUZWuT9Ti6rJi501sNPnl2CoD0SPcqU0xFvGo0\nxuoomgvWTyYTZsi+JgR899YI/40oFXzQlbhFafwDQ0CV0LXQuFKPqFUwH7M9\nOBp5eZCEZZpbCp8OvYgK6IZQV8St4Buhrv9cTZXf7nsO1BZh9uGflst2DV8B\nF4BTwmG12I8Dc3vxEgxQyMsIjA8huBbwioTQlNSR0w96DIQWqHoRLsUA9PBc\n1joJkcxUI7DssoxX0kqg1m9b4H00pI/F1Zbnh1WpAW/yD0BWWkcHrNAMujPe\nk6XsbbfbwhMNZyuUMRBO1L92QJINDpM1VGYd6fqhIMQe93NuLUXCcP5ZybUp\n0LXIsCVeKD+Brg7b2lL8AAKzgfytK4KX277IPRLzW0AzBJnNkOh5RFWBE6Kp\nmF8k\r\n=Azua\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHN5RFgd3XkhfCrZEKnJJH8Eb+kNYZ7eNOAdYjaqdU4KAiEA+ePusdjS2KwfSnjzWreoFAg+jFCptyvvEiUXEMnaQZA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.5717a5a1.0_1595454025538_0.08339942590803617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-select","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/floating-label":"=8.0.0-canary.7bd5075de.0","@material/line-ripple":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/mwc-floating-label":"0.18.0-canary.d84cd4b2.0","@material/mwc-icon":"0.18.0-canary.d84cd4b2.0","@material/mwc-line-ripple":"0.18.0-canary.d84cd4b2.0","@material/mwc-list":"0.18.0-canary.d84cd4b2.0","@material/mwc-menu":"0.18.0-canary.d84cd4b2.0","@material/mwc-notched-outline":"0.18.0-canary.d84cd4b2.0","@material/select":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wOLBYekrSlrCWrh0mFYLgi9rXTSg7i8MoYKH1vfbz6kXpzQFHUBMOYBSzJHQhec5OA6ldN6OWxmtpuDWZN2uEw==","shasum":"96f74c46778b66383dd7e6d4d6d8f1c2a78986b0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.d84cd4b2.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLLFCRA9TVsSAnZWagAAa/sP/R3rsDGf8WC1nlLSqV6R\nYERjr2Y5335NU0tYPFIKYCcdGZRz5DqkVFd2q7Sa9sCka4SU/5CrgG4W8KOO\nuiCeaau2TtDMvLMOG3TsxuaGJB7nnj2hjNy7rZKlDsn38boFcQa7HQSvTQO9\nALLbGb9oU5byPapUUpAxr1SGPyg2k1f7BhikJurJN4lKbaujNIvzwb+rWNKZ\nZcW5r1LD/YDj61EJ2jKHrkRWvoPheIsmjmkpSPMWteDHHCXwQZAT2Vsorpwm\nyDqo5aTuqubzV/ngOlcjw38GYWxp0U8o0Ajvo9wAuGx9BB8DWcHcd0UKoKiT\noj3FnEdEP8/vYsvegT0IImtZrLHQvHpI6Fp07x/Wdf6P9sR+ExwuI1DHZUGm\n5p0fzDjR3GS6at/XEqlJ8H2c1Rb03+qZzBxqq0P6RIxeWKXtooewkXRvMPWr\nQpVMs3AO9Sr5ku9L/JaJUaekcU3LOb9ux8e3qXh949lySoRVI1DeYCrF6oqg\n1Jtzc2fQ331b++HGurP26/co9B6ctJvJqEj6STRyCpEViUxZXMMcu3njj2G8\nk4zwAfpE3o1J2nJhvT/6w33RZvjHAmELAq/uykuSSOajeTUOLXW98oNwaBHx\nvfzVOFdxrxBkJChfg39vnInsgAifmpx5Q5K9NFLMSGzJXZ0AsQEBKNp4UpCV\nAhaA\r\n=gqMI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhXkSHiulUvDYvDSjW64vGTyfhn8vw+TII+09tS/ojtAiAgLjR1SvKen0W6tJl5ZiTbCGTNjYHzJs/EgWLTU/Jz8g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.d84cd4b2.0_1595454148670_0.941355840509746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-select","version":"0.18.0-canary.f279e7fc.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/floating-label":"=8.0.0-canary.7bd5075de.0","@material/line-ripple":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/mwc-floating-label":"0.18.0-canary.f279e7fc.0","@material/mwc-icon":"0.18.0-canary.f279e7fc.0","@material/mwc-line-ripple":"0.18.0-canary.f279e7fc.0","@material/mwc-list":"0.18.0-canary.f279e7fc.0","@material/mwc-menu":"0.18.0-canary.f279e7fc.0","@material/mwc-notched-outline":"0.18.0-canary.f279e7fc.0","@material/select":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-R/UUbe532NSsPUs1yIeLHyUyoGyJzxjyZWOQBcA4dr7M4sIM7WsEq2ip3Flv4BZZe0Nr+gw1SJdrIVaIO1/jwA==","shasum":"a3df15c1fc410ebabc9413955f9a2f60d9a85ce4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.f279e7fc.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcsCRA9TVsSAnZWagAA4aEP/idGp10n82eUrx6uM6hh\niKTKc7htY7cgZc/4axgZCLJIXRaxGwuDZuZz65Y/XtTX82qxxBdLuvXpxQcD\nWqCBYdPkzUn3MUlLlOKTC20OBfJtUy6cdiejCep2424WZVMt2rb8SAdNINCG\ns1w/6vEElcUTGYLKagouKiUhXZqmh+GCOjip7Bi6nHxA8ngNCa1XeV1nmFe3\namDdfLjVF93K53jovc9n/u+uXw14XA03pK9wDCkt39kLrNt2OKMmj0O0TTQu\nFm0txGkyWNBwRBNrJ2ZxO3yZ4q6VyqLmQmhVjFAU0i54MVXAVQpaUwEaBenR\n3cnyyF+OTe2xBVbkOhPB46jnESxq9TZMjvD7YlL8N4icCgl7BRIsAcHMWFZb\n68Wjcx6TDhAFB1AblKb1zydxDlj5hu4tLnx4Pz+VsC/omZZoFbxwr6pe3wbh\nPPp+K3VW+kt8LjQ7n+f8V46wO8MzyUSHQozb+cMcs5/Tji91eM0OMWnDutIq\n4p+vN0HJSQti6NdExRs+x9Fx17ER9++dgEBzcCXH1mxis5eJqHtmae1klvss\nRPptWwyEKbTO5pkvDVYeQZF2b21HpKVwyDGqJzegnrkhcZPwiwHKumE73hA6\nqoT6sza3RvTA6ELxwti/5MDNIJJhhjMygRB54EydzKoVBvOr0pUhYfYv/yEb\nWUlb\r\n=Y6vA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5GRrzvPBR1HclV30RgdHT8PAseihbTb58u5wz7bBsOgIgItxgY19YQewuhkFZT/76T6DDIPsyiwayYR1Ma79KWmQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.f279e7fc.0_1595455275845_0.784892184590736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-select","version":"0.18.0-canary.f181e3bc.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/floating-label":"=8.0.0-canary.7bd5075de.0","@material/line-ripple":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/mwc-floating-label":"0.18.0-canary.f181e3bc.0","@material/mwc-icon":"0.18.0-canary.f181e3bc.0","@material/mwc-line-ripple":"0.18.0-canary.f181e3bc.0","@material/mwc-list":"0.18.0-canary.f181e3bc.0","@material/mwc-menu":"0.18.0-canary.f181e3bc.0","@material/mwc-notched-outline":"0.18.0-canary.f181e3bc.0","@material/select":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sL/EiQB813G7ZkumUdT6kNuz64RS2FMFquZ++5886r0onIXr7QkNXHeiJePaX91aLye0RsX9FHYPxRRv0SXLpA==","shasum":"825ca1ef45312586c3fb1747e511a2affd53a037","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.f181e3bc.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLekCRA9TVsSAnZWagAAXKQP/2Q2skbLnk+vGVxkCdNE\nNukxPhcLDPwnRy13utn8+QYXvzU93jMw9XdbmdQ1FERTXAtgsb/Fyk1yDlqF\nTodDj0KgnSOJdJEAV7AJ7YttSI3CZHIVeziSxC6OdLAONi1SMVB3T7444YfN\n1AX4A6Qf7lkfPcBSYx/cSUkoqt0c/QbeAuICoMwqxgpRqkuKizRmGreYRhP8\n0B+Nb61071dIzHRS5zx+zH4t1GLDSylT432N6gOQ62KLJ4xDnyr4hyUBONjj\npXDyYwDpVB3sihJR20x5NGIEydZ2aPw6z2u2MX3zRCihL2B4+j2uHQ5uAQlk\nYlcOMceKTkbyQRLHbkNh3G8CTabtmnGwnlxiekJ3RtLPFTRGm27XvK5VVcCV\nm+dCAkaW9evzKF8dX+occndtmYk2Bye4KBAjD+spFxH/I5En8tt2md+KG2Ia\nQrST8RMqk5Tw9+8JsbvlvuYtVFeHtXfD7GJ1Wg2QM2xdII+Bc6UI7RrvYJj2\naxYHEWi2aJ86lqbvWmP/3bHk/O+B7oDyOLM/XsJ2Po/pLFDCMW5y6Q0AZfg4\nxWXeGF05+bArsFWMhF2Y43IIpL2rRjS5THST30qsyyzn+rjLJKKSrPhww7ng\nF0yZkHkz3b/uBbo9AKmO0gD27/ja+7G1mWT1kN+rhEU9MlE4mvy/701wa+8U\nNuG+\r\n=m6CW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWOZLArOFkmwgPwR3lDbcLGlfqUEJupKXj6cBDB4VhWwIhAIXr/Al4uo5EvGTcc4tIlEeBGYPBzqURgkc4Avg0ndW9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.f181e3bc.0_1595455396349_0.013272606508654361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-select","version":"0.18.0-canary.346a622a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/floating-label":"=8.0.0-canary.7bd5075de.0","@material/line-ripple":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.346a622a.0","@material/mwc-floating-label":"0.18.0-canary.346a622a.0","@material/mwc-icon":"0.18.0-canary.346a622a.0","@material/mwc-line-ripple":"0.18.0-canary.346a622a.0","@material/mwc-list":"0.18.0-canary.346a622a.0","@material/mwc-menu":"0.18.0-canary.346a622a.0","@material/mwc-notched-outline":"0.18.0-canary.346a622a.0","@material/select":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fyLUU7mqUTOsvC5QbFTACXjJDBO5S9/gqllmn9gEpeuZzGIx73N5qc9h3yRkpxhPbZAF+uCpazKq/YOKR+s3CQ==","shasum":"a43bff72f07c540afce55ee564c77f8caa1d2958","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.346a622a.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5vCRA9TVsSAnZWagAAskgP/2Z7X0L+nrlK4W1XqCkU\nhEptUdJhzz96fiY+vBL7rFt2q0J39LKmioz9fZxaQCo5lDm2laeoHmZYVyXW\nVcx5JMkBpRomJ/uJCgeoyg+Qr5groRdz1ttLjCzX6z7jHJJucXWG8k9zpGao\nhA5iA5S3MdEg/u5uu+pBS19EPCQzhmBaeTIS/Mx1tDe6pAqB4p26hWH5ngU9\nntKzIWIfe5Y6rTIHERqaRQ4l1+g4iukMWu0hLdpccA6AYsAN3z2+7PRl2pPB\nxHEqVnueJUeLsxEwW7CSwg47Q+M9YAhOtmeSVYGIDuBm5Mk0QNnfwQyxkZBZ\nFCl4HqpI2ULMOU/dodh0jhDxjTgkP5fvX12gKX3/UAIL/Zd1u75lRW7iCnbx\n6+h6XY608z5a6swgvqqD2a+NwfYvbm83FRPjZtIC/9KfDoxzeGeRiZ5nMOVL\n5mvwZLgMO63Kz9UxsJPw2tmyrZ4Dt9M6+FTEJjkDDGdexMmWn+0+sXkC7nPg\nhXLWpBRR7tS12HH79QQtvDriSJ0dkZP+MnVkwTJLBW1+4ucrIzeO/Zy0eAMt\n2KTVq5B4MriyHu+y8AeDkv9lnFUwXR3b4SbTjLrDjrRg13cEzJPbw5KEpfcA\n1JpaDf873O1vx2B5PXjwmpjDNJpYpQAv7Lq4dvMG6XsHHv1wbYMiwGCDaCq+\n+T7C\r\n=BUx5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuGieV5wZ04OIYqnGiSJj5iuFMGdvutLv11qJO/1JGlQIgBcIhiMzGuPs4dqidrwCwdMt02jTIDuOI6QusUagiYbE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.346a622a.0_1595461230614_0.49390405847107455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-select","version":"0.18.0-canary.c9e8a848.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/floating-label":"=8.0.0-canary.7bd5075de.0","@material/line-ripple":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/mwc-floating-label":"0.18.0-canary.c9e8a848.0","@material/mwc-icon":"0.18.0-canary.c9e8a848.0","@material/mwc-line-ripple":"0.18.0-canary.c9e8a848.0","@material/mwc-list":"0.18.0-canary.c9e8a848.0","@material/mwc-menu":"0.18.0-canary.c9e8a848.0","@material/mwc-notched-outline":"0.18.0-canary.c9e8a848.0","@material/select":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-T8EM6rbltDEZ7ZxoocsnIt2AwKe4FK2ogfHIhxT7K9LdBENlgo2CMbA8psul1gPTUbYkK7VqwuAHJNWEjihhTA==","shasum":"ba888541aacc275e0e42aad21d1dabc7c380f442","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.c9e8a848.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOjCRA9TVsSAnZWagAADvsP/1eGkux1udvGSenGuai1\ne50RQckCEkDFLWVwS3hAFf/533Lgm7DdqfwrX2psSf6tUKTctSZlCBM3Z4qw\ndz19+knTmjN1y5rujdmlfooR8yDgMml/aixCFDhUmfQb73udNWoC/bJNut5w\n8BcE196fSNwoL4WK6Zhxq1fsTKG5xtZeO/mdjoYkc3HP3zlKapcGlp8slicr\niHKTReHkAo3tIpyFdWz99Lu7dxKVHyvFLfUZll7hb5nYAMt9xa5aXZ0h/aE6\nFWFkjRXuA1Vy206tmt+oMCCix5DyyFap6Uwd8SrBsVH2fSGkzSZUnwwygHKf\nsBZgntRUpAmBG2wb0xY9n47rQABKAVohgYXgddLgEJtbvJhUlvnGcoEgl2mL\nFPv1TwORIm8Y4HDPA4NmnQczMFZ3S0zmhvVmNXctl8+mJUlplye1KmI7Ds+B\ngXpa3ePh2HxFI+H5JSkwc82vN2BGufD5LxXgrskZbmkL0g5RRKPPSjP0SaZQ\nvA5QdYFI5vvOETQMSUlTZ3ZzlpsvlPYnCjZtkZN4uYj8MqQO2BcsWCGVOFH5\nZg+8yC1nR+SiTcBHabTN05q6HWlMuxMHBFuMrDecF93UGa3d5vInb1LxhQ87\nHBNgxw0ILD18Dn0a5kDc2g9+ahZ4K7Cly66dg1Kdk3LAYIn/uBR9/R6G4NCL\nNen2\r\n=/abP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw/TqSlvuB6FkVBca2VQBmeGDIieOOMPJ2c3qAHARwywIhANrUKWliMqxeAAhswXs87P14J/yhB9YKJVfvFtnjHJDm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.c9e8a848.0_1595466659103_0.8987951610496085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-select","version":"0.18.0-canary.718c385c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/floating-label":"=8.0.0-canary.7bd5075de.0","@material/line-ripple":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.718c385c.0","@material/mwc-floating-label":"0.18.0-canary.718c385c.0","@material/mwc-icon":"0.18.0-canary.718c385c.0","@material/mwc-line-ripple":"0.18.0-canary.718c385c.0","@material/mwc-list":"0.18.0-canary.718c385c.0","@material/mwc-menu":"0.18.0-canary.718c385c.0","@material/mwc-notched-outline":"0.18.0-canary.718c385c.0","@material/select":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CNSV0QW4LrHaN89SMv4UtW+jjf1Lo9eGzPsqn1VZ4k/xps8/dza5RSg4P+6eQC8FKuYhGsYELBhCyf+fDJR95g==","shasum":"b4e710de859cb60a66ea292c757eaeead83facf3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.718c385c.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3oCRA9TVsSAnZWagAAxhsP/0dIDUYELrO/Om7w8VP2\nPNlyP14eQQE0nWC+UNwUccAKTzqaOCUAJ4gSLN+h75hzS7QSQ7Ug0Xd3dghZ\nhWJ4xM1sVCzBkL4lbL6DxbxtJf4e7OxJllndIYxll8/wKm/NtH4g1pElovcP\nh3yIOGdOrUG3vTodY2nylKCWTKu0TaglU2QlbS3Hs8oLC3V28c0gi5t+EMrQ\nhv97fHsW/hFUOKSgnjLCadoARN1jdbd+dtFy5gbKrQcSwPtkU8/bDYdktLHq\nCyuZsXXkx33Z0vPRFTk8lOx1UKOgsMp1/bHEHq69LGXwh6f11lb+99zAEQQI\nJj+OLV6cVDm+r9AREqJu5P/LZXyhdiHvGc7Kpwo4nX6tyReva+8ydB2UB9cP\nrRf876ZxVED+/k8q4a+cHgD/5mBBnjI4T6kcjEmXf9wjofUQAXDlD50sB13U\nEpM3EekbUNKhi4QW7pWLx9aOAXRsXyJxcT4jv/O+YYYM5yWIpazvlHl13zZN\n3V+CMd7ZHhBOk0zxrJ2GUFeZjiC8AHrGZ3TgatibcBFGwEMnk+Bwroj4Jq2U\npVqI4tjTsxUewjq/TcNM8FDUd/qbM2T7zZ43/MXVo6azyLxqcEQkoBIYt32i\n+pO2+UzrjADi1hDdL3iocpA9gwRzmBju7mfUFbtfJBSJNTXpIpU9ve4Sg+f8\narin\r\n=Wc/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQUNGOY6lsvPUilIOEIW0BHq9qx0Ycf/qpm7IP09K1qQIgIN4yx+uxqxOJ2i2RUbY7OjL6E/M0p1QM9f9x9lwJq/4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.718c385c.0_1595534824272_0.39122170361533004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-select","version":"0.18.0-canary.cd516a27.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/floating-label":"=8.0.0-canary.7bd5075de.0","@material/line-ripple":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/mwc-floating-label":"0.18.0-canary.cd516a27.0","@material/mwc-icon":"0.18.0-canary.cd516a27.0","@material/mwc-line-ripple":"0.18.0-canary.cd516a27.0","@material/mwc-list":"0.18.0-canary.cd516a27.0","@material/mwc-menu":"0.18.0-canary.cd516a27.0","@material/mwc-notched-outline":"0.18.0-canary.cd516a27.0","@material/select":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jqAmBsg9iLM2yq7LYiC4PN/fQCzlp2trm+Lutay4meByG1a5lKYMSYWCaxHWOffVhZHMkOemxEcRgms/XO5Z/A==","shasum":"07114d99e1b259616feefc142c1d6f282ef7bae8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.cd516a27.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzJcCRA9TVsSAnZWagAAOE0P/Am0SwCUCZ3U+QpLPa7I\n+aUkrDbPozRMEGTo1mZG+998dYPwglJxKhU/9w4M3iWViJcCgyw17+3OJlS6\n5BQZDwXMpFR9oUEdfP1jhzOHz1iQsw868s/OrXYjJXw14tcJCxUC712H7f8S\nqPDdm5H/PWigXTSVrozLjiAalrNQpt3KjTXqD1SJetfMitNNQEM3fOtsvC8B\n5UznPKTOupFHjROINLK8JIUKxLJk7YGMV5+EPu28ydW/SCD+V3aEzPJx8SQ6\n0a/Sb5FkYt9gFg17SZdE+Hn4MgbdIgBBZZRC6pyzeUoWEivzbMCjwpBAYlU7\nh7tmRRtbxClFIJ50AhhVB26KXsBkM2jw4OZPMHwILQO7jj3jTMJq+AF/6btQ\nau/LsajVjfDEksgSkrRIiAo7FRkIrCKmrgjDLvkxFlP2YkYzSezYb/4qV6ap\nMKuBAoNFBvrrWUTtE0PIA++WdNYVOP6OWQPXGH/QJQp00O0QXx88S6ZN3KFa\n3NoApaaLvT2oyUUCBeeWqRZKUMmR6cYpRCbIGzoF4Y9u6WRvw7jAb5WnHg7m\nCFVxYe6EyoVfUU3xa/hrocoVhMbNcnH3Z/3YaIeDEnbtyaGwmyDn2XeEHpu3\npLnviy9mDT1GYHoyt1/XCH0HPEwNTDagGKVwrjt8SHPae8G/3E3MTgXD6iFW\nKthQ\r\n=oCPg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwZ1wV1Fz5GIqaphyDKHeS8pB6APEtE1cyw3cMy/NEvAiBC1P+TfPe4e+1MkbEAFhOC4Ngz+7aFoqrrEippr9diZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.cd516a27.0_1595617884146_0.5272174264569418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-select","version":"0.18.0-canary.1f082191.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/floating-label":"=8.0.0-canary.7bd5075de.0","@material/line-ripple":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.1f082191.0","@material/mwc-floating-label":"0.18.0-canary.1f082191.0","@material/mwc-icon":"0.18.0-canary.1f082191.0","@material/mwc-line-ripple":"0.18.0-canary.1f082191.0","@material/mwc-list":"0.18.0-canary.1f082191.0","@material/mwc-menu":"0.18.0-canary.1f082191.0","@material/mwc-notched-outline":"0.18.0-canary.1f082191.0","@material/select":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FUhFWGaJIUCg/6zwH9NuJTMSuYd0A+xrohKPuAI4KnNGbm+DL3zVixtXEzj+FCySv+qdTNvhbVvSB4l3IdC5Mw==","shasum":"09b9cb340b48e01108774804ac11218ff6c550a6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.1f082191.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzOcCRA9TVsSAnZWagAALekP/2HNjIp+vdjT+EiC6O2+\n0yvJGA3UabO7mAfyiJgKGzjvjMnksw1NTlhejkkFbXOUDm/V5uzcEHvzsIi/\nuKe1KMj/ENzx69JArs+6O2vFNN9uRK0bIpOmRSPRbmO+mLfzzfgpK665lq6O\nntHLRvRYYFWfGBVmE56cZw9EhaTxzHI9zSPGmEWX6egO4EnTpzWWpYBpU7MT\nDX4oPF3kg1zQLKe57imvmUTNOlpaHlSlbRGHh1zyPHG4O7k4QigOukTnx5Li\noIT7aslcD+zNCQzX0UTbDcchnz7Zu4/u5ED5rqTcPeFxOPZNWHgZAZqFsfYa\ndWXvaTNXQ3WZT+qcsHr/G3X9APenEWETYrC9ft5wyCRIwUKW8xe2CLfwGTyp\nRUy6lcr0IgniiKZZhEecOcGZT1RSNL5K+8YuII8ERGaA1owsibmfSf1Rfr1e\nKVhJFkznfov3ZztIpqSM/ML+15lXLXTvWw0LKSbQc2gwbgkPaOdNVGxWqu9C\nxUY1ZTU4ZtysGy6EHu88PH3jAeQcU5nbtv3l6puW+2zHGnyl6u6ivWWTj8IV\nGEliXUQVwDqR2BeZ8W1tc13SSc/kwJDEYSK0xlHy6ktW7VNNoXQzRLq97/Gn\ntn/UqemwYPJmE2iNY+gGgSRpVnclDp4bF5GRAxRd8B0ryGbVfqKWIk6p+r9H\n5aFu\r\n=obqd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBl9UO2YCvzWAmHNIImjNpEGpQtnFu3FzH2N8oqy2+ihAiBLYHNGxXMwG4xn/O/nyiN14EM8hCyqLuWLkIti1OWS/g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.1f082191.0_1595618203613_0.6389487435519436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-select","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/floating-label":"=8.0.0-canary.7bd5075de.0","@material/line-ripple":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/mwc-floating-label":"0.18.0-canary.ea3e82dc.0","@material/mwc-icon":"0.18.0-canary.ea3e82dc.0","@material/mwc-line-ripple":"0.18.0-canary.ea3e82dc.0","@material/mwc-list":"0.18.0-canary.ea3e82dc.0","@material/mwc-menu":"0.18.0-canary.ea3e82dc.0","@material/mwc-notched-outline":"0.18.0-canary.ea3e82dc.0","@material/select":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ndrCAHvf8p50pkQCkKs1IfFDHo31TSd14NU98Xu8Yf6GzG1D5Z9wPQi+kwiGH15J4qmjbkj/wja6pW73YBFVdA==","shasum":"1f905d7bcf393c22f034adceab1ff5d041deed7e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.ea3e82dc.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzTXCRA9TVsSAnZWagAAHGIP/iJxGcZh9plg4TiOligo\nga99LnRaHqF1EMPnfBtSDi0r2LvQqdG3+jqaNP5KMBwS7E4NmzCzBGS1UQGY\nYBReyW8taQyiqEhlvqosHiX0R8Pp0t3AUsWIAXkN85T1Bhn/3oNsRQHmvh1Z\nNVmar8sV3fz0653peRdDIf2oUguPlDBdX9f+GkAFpNiqLPyFOWlD8skgKhBk\nIfZbbB2iFP2q97jCv12Xuxp7CC3v5/8cQ+Cc4FnpNUao99HwY+CTGELGDBlC\nUcFVpBid+WcbwSYozizMB5fO1lWGJ784Vr3otJR3UkOWJnYdOha16Q/EShja\nMMKbK52+8ZTpWgwWXWcMMCQmXCU6psv3PI3v/XWoj9GyxYveEFeGRL9aRN4W\nOh3O7MsB3xkdn+x1B2FZqDp1F3elLZf+W6nwsJkrvbAYTsudr5TI2hklgVDg\nyHASmvi/UnPW0fqQRX3y0Mi4gAVbOtgYsGB3mvWxgnRr9QlX0D+AgegpeTlP\nNqN/GsQC3A8ht5S1XRRwaPp6EBU6nXBmXiX/Rite6ANLa3/MmoyNzRCVd2zc\noCAyDOQTouKA+t34cc3FmjDmwicAzxvsJH6Y97Qk21S/ok23uyp0xDSxwkcx\ng1obwg/tP/aA8QJmxjNoJB4Shf1eyyLX+RbGu9T/vokevTM4P3vJMy7hw1Gt\n5io8\r\n=wQqm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwPYlZsqx3MGuLfcoUkCSp4EMaKhkttg18h6rzlWXajQIgIPEYtd28EoPr8XW1ZPW08975tLbeHkZ/8SnuFSh0ibY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.ea3e82dc.0_1595618519045_0.14157218059149845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-select","version":"0.18.0-canary.94987b64.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.5511e0aeb.0","@material/floating-label":"=8.0.0-canary.5511e0aeb.0","@material/line-ripple":"=8.0.0-canary.5511e0aeb.0","@material/mwc-base":"0.18.0-canary.94987b64.0","@material/mwc-floating-label":"0.18.0-canary.94987b64.0","@material/mwc-icon":"0.18.0-canary.94987b64.0","@material/mwc-line-ripple":"0.18.0-canary.94987b64.0","@material/mwc-list":"0.18.0-canary.94987b64.0","@material/mwc-menu":"0.18.0-canary.94987b64.0","@material/mwc-notched-outline":"0.18.0-canary.94987b64.0","@material/select":"=8.0.0-canary.5511e0aeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-R/VcO9vFf67gkPauSJ0pGHWwAY86vJNAXDlK/BBUfUZO8dieY+Au9Pwgdrs7heND+0i2YMXJ01CpK2rHN33AHA==","shasum":"4f44b2ed55efed76c1b9ae0570416c4b78adaec6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.94987b64.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0QZCRA9TVsSAnZWagAA+CAP/iSP1ufmN35qZYqqQWwp\n08AC/X8OMifcWSVq+XVzPSQ7BNz9p7gG0BhJyFIkLe5/0j2/PHJ26iNx99+V\nJJB9c8s6A581j5J+qSgP+O6dTFOiBryJklOzrgTSeZC3FBA7h/9+WAdTJej/\noKB9Ya4ooGlyNY1MyXdkfn1nZtnfEwDConj9nR7ju8nF/b2SykI/n2tTT3uQ\nw6AuTpj9RezJNv+bGrkGoCKIQZoM4Glqp7RTswNN0/DomkHddMIKG3mnyBQT\ncfd02Vk6RlpssARwqmlqyT4cFW3Rw/Sn1z2t958Zww42X63wG9XpPSWTe8KC\nL1PRQGwgT2+N6UbRIoP4OxATFr4H5uyOrQPImp9SwFdx4PEJYZPti2l6hmwu\nhDeVd0+4MCUy2bHCY46MIYuvr4xlVH01Ye6UZU5H13xJ/bcMgvrnasoQI6VB\nKu9MZHgFu0dcHgxZEAYv2btMMz0d5M2ZFir9jHdIKGIKV/hKKv5JQxCnrm51\nMR4k9H6fS72gHz0+3cOykkIC+dSNll0WEBhUf5w5LXlawGrDksHt9fCPB4RM\n1a1WuPLYRCzVpX6EoVkcs1n+Z1ZzG+KJjCrizo885BboBAYrPvXH1ZidHkiw\nm8pzZN6c+cXx7tGjBa/UsubytIz0iHlblHSDbfpQuF8UlFhYDBfZjfsfwiRA\nl/ce\r\n=OWef\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQubESK2IyAutQhTKDbCpbFXFaIr4hmV0UYWUZkPgu8wIhAJ28B2/8GH3C1+5F98xU44iPeqzPYNuvMeC6BWbWHHpL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.94987b64.0_1595622424999_0.39373871156347473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-select","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ac405eae1.0","@material/floating-label":"=8.0.0-canary.ac405eae1.0","@material/line-ripple":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/mwc-floating-label":"0.18.0-canary.ff49b7e2.0","@material/mwc-icon":"0.18.0-canary.ff49b7e2.0","@material/mwc-line-ripple":"0.18.0-canary.ff49b7e2.0","@material/mwc-list":"0.18.0-canary.ff49b7e2.0","@material/mwc-menu":"0.18.0-canary.ff49b7e2.0","@material/mwc-notched-outline":"0.18.0-canary.ff49b7e2.0","@material/select":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2IO8MFQCoyvKvq3X7qlaXhQHXVo0Os5y17QIfBUMj0z41DctWpkzJXAODRmx6CE3309bXeeQemlQbKZyWOhSLg==","shasum":"094d3ed47477a21134e5773222a18c152f9cc7c6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.ff49b7e2.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyV3CRA9TVsSAnZWagAAenMP/1OH53lB+rtykoMbu1Oz\nqvgFpAvUQsPeoT8g/kCmZ49uHPP2BMt3JJIAT5aO/C3lXZLvC8gW/zkUUGFq\nt6Z0uVBvdhMbuKSJRPwuA2Wc2IbUvUP7tw0bO1Kzy6G983ExjStdn+bZnogu\n9iGcLZMn0ZyJZdVQWyCZQo/nLzjPYqW7rCZPA9JTCzXD6cHaGOwvmCSQKR9Y\nG35egqF2tdc1AGuZLdjvhBdjXKuOUdH7DXHoaVDyB62VJ1mbPL4EbnFWcIQm\nzyflc2EPzW6c3Yo0Edn3M+vABSjr/ITwfcszkI4Yd6rqWlxL66JAiEg6KOug\nyubPtTFvbQxxFE1uFPr+y83xWystUbJWoh6vL4lSbv9MNWUVcWNFh46f1B/p\n7Rge9GzPrDke7ANDOQ7ojJl21VQRTAbxVCZJb0X7QepaaNB8ypfeSTP+ly3+\n9E8Bl6JzQ7EWStoc49JFEFP6GbUT/CdLwIQSiO6qykcJbhqEYaQVbvA57klJ\nAvPcXTkAmNg9UY5Dp3l0i43jE9zK//K2QXA5qLg5iGN6LxuCX7eZq6Sr7uWz\ndlj89kpqrDc+8ccANy58oc/Yl9wzIXxPdJZTAIUyxKAvQM00so5rKZGQAy6I\nD99ZN/XEeCbntChzWxKkYrsoajKk1jqi39PICwFPoBGhLr3PGA1K3H/OQXus\n6T8e\r\n=F2br\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAED7xgu8CSzC4o7K0I0YAb6c2b1IghlamZudz4c4A+GAiArcll1v11YFt5p8uZvDXrzwvRfD4lOZD7UxDqHuoXOBQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.ff49b7e2.0_1595876726765_0.8790278359972818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-select","version":"0.18.0-canary.3d334ccc.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ac405eae1.0","@material/floating-label":"=8.0.0-canary.ac405eae1.0","@material/line-ripple":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/mwc-floating-label":"0.18.0-canary.3d334ccc.0","@material/mwc-icon":"0.18.0-canary.3d334ccc.0","@material/mwc-line-ripple":"0.18.0-canary.3d334ccc.0","@material/mwc-list":"0.18.0-canary.3d334ccc.0","@material/mwc-menu":"0.18.0-canary.3d334ccc.0","@material/mwc-notched-outline":"0.18.0-canary.3d334ccc.0","@material/select":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jGMEyzUsj3Q9NafwIJw7HcEGkPBgfa1ZRTA2z5LHuflEI5BuA8h7vkOzdvL4YKWCp78SwtI0vp5B0hKTOC8TIg==","shasum":"345292c8c6dd661ada228df55f0dc25a772de2a5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.3d334ccc.0.tgz","fileCount":46,"unpackedSize":930903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE80CRA9TVsSAnZWagAAB9sP/iHTDKYouwKoaLL88yPq\n69NfCRHiJ3TxrYCbYWf8YagMwp+rWf6rKXOuuRv1wsxp+s9V08LM9smOD5//\ntMHlEEHXUsiTqjRMginu30c/WwcF2DBOj9HPihgTWd17Sy+EmZGjs6d7LpPV\nyyefpwtTjYNakd7+xHq8Oo4zCVWydzYAG1UbxPeTwmGLuQLLCFfeHm9/5ohH\nKvDbp0lrHwhP+8tD7rC5pc/Jv6tIhK8X56CcAXO7YV7uu0Lo5fDT4PkIB2Hl\n8T0PUiCRvnSVxPBrZQkRg7T93C7TrPq5ZgP2/HdwWBh1Cfa8lmWFcMbuOOZY\n3u1TBLRgGP6Oh9D2/zAtm4Bc+R+ybYXhj4BvEmL7BzkOhjHk9daialUjFM9O\ny+HVVzLKPengiRKMiGIWJcYH6Em7K46F1fEv1rNv0IrVtiyWx1dP3MF2zIJv\nu9buG3F2DoG9XkyLGVCBEMOcWoJgOKzucLBinu3I64r5PhsWNnNC4y1B1rY6\nDTSg6RdY1IUNPIRe30DtqqwC1ve3gEda2185LS6ry3W6cmrW4/EtlwR0cW+K\n5yZ5bMsGEIdSD1Xxx+j9Y2kOjqFvozC9edFkvrqbuimAealPF57pi2vkVRJE\nGKT/iZn97/8dZIGnNyG/JHYZPzLvD8aFqYFgXQlWAy48gufyuJPZc0byNQRh\nZ0Cg\r\n=NTQ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNUXjIhRXlXE/Kb0OTSRKP4OJ3hT+9EHIbnWt6xpDFYAiA/9wlseU7B8Ka/ovXhmzd/rmqgm571CWC1u7q+tGqkSA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.3d334ccc.0_1595952947928_0.8011419690724202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-select","version":"0.18.0-canary.82ac569e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/floating-label":"=8.0.0-canary.f86f83f54.0","@material/line-ripple":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/mwc-floating-label":"0.18.0-canary.82ac569e.0","@material/mwc-icon":"0.18.0-canary.82ac569e.0","@material/mwc-line-ripple":"0.18.0-canary.82ac569e.0","@material/mwc-list":"0.18.0-canary.82ac569e.0","@material/mwc-menu":"0.18.0-canary.82ac569e.0","@material/mwc-notched-outline":"0.18.0-canary.82ac569e.0","@material/select":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KE9eMT7KXQsouEVDHlQ3RDoN4D8LCKDjxbb81TapiqyrxURuc/utQ4bklpIJLANzYtoZvB/g8Ly65kq7Pa91og==","shasum":"62821bf25d61bb80afe5d948aab73eae2be24539","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.82ac569e.0.tgz","fileCount":46,"unpackedSize":930993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHG0CRA9TVsSAnZWagAA17gP/iEz+r0wQZl50dK3zqel\nzQkM3GnguwfA5bdjZNLSsOyZxZeDfEamDaeR0VYHMJlpg3anv9cItRACSbtp\nvesF5QKNGwj4SKpf1iuUcdNkiYGMgcrP7q+S905WupKOga5uc21bzdyC5cNH\n57P/l58p+b+sBhhrTEBjDkyR3Y0RDDPkthTyHSaCpWP1Wpsr/+cfJbXhKbTp\nAJqke5hFh+PGIiGlsixMocZVn+5Yo6T4hQTt5iK1mUfyozdsS2Kqy3lOZOg3\nk0b+mgsy5V7aChnWUcJpF1JRROaxGaDKOMYlbPpif1o8o1v94bY5LwTFfTrF\nkkLVXolzR7a2tFLU+6WlugQHVdCUwXQwHTrMe9RWzXIQOR/bgmHnqREJX1aM\nilfEKWfXLO7DikLq6f/GCtK3l4lcboaNS5NorA94wL3888VvOicHdrP/SwKN\ntCJv1vM5EXE+NR2c1adlzXU2QhOTyTBci8CR3xzrWBfIYuX+Gim/aZMkjudV\n5fBkRmGvgqznNfk9TGwkROX7373Qr+AEX8EQjLKu+A57sjjso8l9xMYCZgK/\nA15nVkEyTNSTqGSSMD0/mbRFjrmFGqJb+fAdSsLTKuPox3R2/PqGb4tMBFB9\n1AJUdvlcHUu5Ki2gWWjjNdoNxl0l2jy9MrlXfCfPR+kqTg7Qe5au+l2oSvn8\nc6H/\r\n=/qQm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMjg+0YlCromN8dCb6CwFrU1u8AgjxCXD1IQGFYRWPSQIhAKPm5iIP5Dy0CrEfy+DaZYe/aKI8ag5YQxeV2cgL0Wdd"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.82ac569e.0_1595961779690_0.7627699977835969"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-select","version":"0.18.0-canary.99df7397.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/floating-label":"=8.0.0-canary.f86f83f54.0","@material/line-ripple":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.99df7397.0","@material/mwc-floating-label":"0.18.0-canary.99df7397.0","@material/mwc-icon":"0.18.0-canary.99df7397.0","@material/mwc-line-ripple":"0.18.0-canary.99df7397.0","@material/mwc-list":"0.18.0-canary.99df7397.0","@material/mwc-menu":"0.18.0-canary.99df7397.0","@material/mwc-notched-outline":"0.18.0-canary.99df7397.0","@material/select":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UTxQwnIN7j9ZolLbtVA2PfBFTLLzbDzmECVSE5HFKGLpz8sBY/ow7PRyxeeved9RZEzKHr7fbde+F8rHulg9jA==","shasum":"04fcd40a3334c3685033d4bc1c2356873f038242","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.99df7397.0.tgz","fileCount":46,"unpackedSize":930993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOHECRA9TVsSAnZWagAAdREP/A99pMs3rCqWPic5VT2x\nFG+fLlT0oQDMIyKdTL2oWLV7+/2dyrLdbk5Hsq8lOpRxNA+ac5PF/prw4us1\nkp7U02U4j4alt/ApPCGEx3d+l7XtnQ0rt6HqIuRslPJpJLbHxyMoxE2uHagn\ncK3F6pNHt/k2+vsaoi87ZJHM5sCVoOF2tjWjnRW48PZGDCwwbnFhdJl33FD0\nkJ59DIpZ5t7jlqIeDxjIujvoHNRTQyPIRcRa/GeeMxrNdE6jwryqknrF6zxL\nbv5H3W7YPATzHzq/+a431CkFeBpEoLnhiglVvQXEFCs/ehZN9YNsG0iWDq3O\nZ306ny7WL2+KwvgSh8gygBWmlBVinDotoArL9xMbzPb8UZ9WAn75OYaRcN8k\nbhkNRuEAIGP2aqPRc3KPLF7+aCxkC5pFdutJ90kE8qM/BNpbxkurlc3UZkbN\n1Pkn/LkjrJXGMnd8YEV+bMzRr0XTJ1tgyL9CclJbiqJ7QxnGMc87gzT88/Bw\nW0XfDMHmLWVXGchHGcM3KYhiPMqCYpkoo11T0/CrPtGdp/TsB1G6ih8KQjB7\nxf3Wo9XG//MSiRjOHjamGQD+nV69BdB2MNEFr9b2e16+4VyiEZnaCfYm9qDs\nzV+LBmDwgd/mqn3zn1tiuaI/5b9yJbVZIMrtfubHEZqkLfmamt53uxf7xZQc\nODv8\r\n=wRiQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOrTjutsUJ6uRabKjCS5gBcALCvhTsnVNQTliWbKbj8wIhALEDmiHqTSaAM57xjlgq0AcOcpD8/elEtu+X7IKo/xYb"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.99df7397.0_1595990468227_0.18479357841965016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-select","version":"0.18.0-canary.45493e05.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/floating-label":"=8.0.0-canary.f86f83f54.0","@material/line-ripple":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45493e05.0","@material/mwc-floating-label":"0.18.0-canary.45493e05.0","@material/mwc-icon":"0.18.0-canary.45493e05.0","@material/mwc-line-ripple":"0.18.0-canary.45493e05.0","@material/mwc-list":"0.18.0-canary.45493e05.0","@material/mwc-menu":"0.18.0-canary.45493e05.0","@material/mwc-notched-outline":"0.18.0-canary.45493e05.0","@material/select":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FEtUjN1Gn6l92gZxru8OzCSwP6JxxOJsLqyvKbXzvvmbY7Y8PYYCJNaULDOEOpmnkxUu8y4ZXhMcve75eWF4fQ==","shasum":"e6ee4ac8562d2d1ae2e7cffeac947d4aed7fddc7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.45493e05.0.tgz","fileCount":46,"unpackedSize":930993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa8XCRA9TVsSAnZWagAAlD4P/j17cFAQZCbjAmo5oCU9\nbLp+1TP6MlDHSOK4AEulJo7RY52knU713XTbeTyFyIhf+CxJpF72JlxuAltd\nUQ2+WejpqZUY1aijEIwEepwvfirsmd48yPG2ja7Ue/rK5s8TGvDWrPgXE9lD\nxYHCURXZFRE4ZUwDPZ9xy1yjC7T4++pswQX2xpjN53SZUDHd9XuvNhZlqQWq\nU04tATsDUTPyzINvtcW8dfmw2Bd+dTWvcVrBsptlaJWYj/tC5MrNFfCQ/X3C\np1nBw2xynBdTwyqMSgPc7nF7U/Z26XZCKGGoSCU4NPNSfCWea0haDxoeTrw/\nI5VwX/esaLD6W96KLOLrHKxlc3Nwc97jjLy6zgU6iFg2kSL0Dqy0KvVJOgw/\nCMZTOSrisBW2gedQnyEsgRWI1WlL9jL5/XW0e0IQRjVKV7hEyY6PvLiWew/x\nBJ/jR0MMkyOEmvPaAmn0oousMI4alMDwVy802DIGuePwZnQtgAItgL9o8VQI\n9Kstf6MiQ+1WxdTryVrf6kotDkY3Efz2KeVkgygtNwrSX9RZNGsTkmlwKnw0\nYmrE6wvbXQUZ7wzIWvxnLOOeP0/wlattqV3eV7zaGD/Qeafb0oKOZ4RWGLiW\n2DDCCRRi3zpnBx0hMdnIXbEuKeNPhmS5rKi4+9PbediYxr/c0GYIfm1D0zt1\noA35\r\n=19Qr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxJU//zo2kVyJ1YV66Y2mRgeGwiZKFCxVzhtG49qJ2VAiBReGhwHE/+YCRCAAmFxN2msT2KiDMdxS8fYghYhP9szA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.45493e05.0_1596043031119_0.01104213386122277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-select","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/floating-label":"=8.0.0-canary.f86f83f54.0","@material/line-ripple":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/mwc-floating-label":"0.18.0-canary.f2ab0a95.0","@material/mwc-icon":"0.18.0-canary.f2ab0a95.0","@material/mwc-line-ripple":"0.18.0-canary.f2ab0a95.0","@material/mwc-list":"0.18.0-canary.f2ab0a95.0","@material/mwc-menu":"0.18.0-canary.f2ab0a95.0","@material/mwc-notched-outline":"0.18.0-canary.f2ab0a95.0","@material/select":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kFV8+rn6+dcoNwZTd8n2aJBWqoH13twGDFurHtX51X7LndrwIhPJ/jknq7BjWxJ9LIVPjyFpmaJYRYul6LfPvw==","shasum":"84577cfc84a1cc551cc867c583e8f1b26cd96fe7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.f2ab0a95.0.tgz","fileCount":46,"unpackedSize":930993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbBGCRA9TVsSAnZWagAA+Q4P/3FVtsLJ0tJxJczwXcEX\nf8PF//y00nZ8l/MVqUptfgaI1tCM9foRoqcqbdLT5quqbBB3jffGpddQa/Yy\nR1pgmyQHbGIe2xJIfSyTEzsRC9YMcKmOzIkeQHQbJRkGOO0Ligw5XyFO/3UX\nHI6w/3hTl30i4eNIpbmu2pLecjGzY7bkRDDAKjkka3mdT27V0gJrEioLYDX4\nG1S7lwk/VyYqF1knA2hsAZ5ijJHkD1bGllsLNmfwvaF1ElV5i943EIa1fFhB\nIQmcEIUwdYdDcl0ex0GbmjKeS6hwcyosMdmTtSYdNxXP3Uezk4mWNN5vqigY\ndrt+gY8bF5gL9w+WiCFzEdFR1Bd3yC30dJayw8Ep7OwrjQ5joBBNqaE23SXY\nM36JWPskD3ZF8cAzGj6aCeYAAo8txtf5yfQq8TKeu+9/xyFazu17Ub/tqzcT\n8Bo9VB0Luqtul9+l12J8t3Ivt6f9lZ7BUDcpRgYXZDsCidnpdY+SuXNy9dgE\nI/uuvhWaNPrwC7v7h5JwZMR8ipo1wv+IaF9+k6sxAomeHVx4hoSdRkezoJOM\nM9ZorYdsQUFstwNj+XUpprV2TcW4q1/eFnRNK+nrvFJsLkh9lNk4xfoLQTtt\nDW5i1LJkV+ww7i2KEQyAzgGuE9G5pqbZbkyokKiqPG4BxMLz6zKF+mR4GDfr\nWmaX\r\n=CgYZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8xu5qvMC84QLDNl1XJTywOF0ebhYXV8SawNxM2YPEeAiBbTjtDRBM8pyjsw+xCZVEL2Glfl8LsDs6uBi2FfKVhMg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.f2ab0a95.0_1596043333618_0.3671022657548342"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-select","version":"0.18.0-canary.45f9eddc.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/floating-label":"=8.0.0-canary.f86f83f54.0","@material/line-ripple":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/mwc-floating-label":"0.18.0-canary.45f9eddc.0","@material/mwc-icon":"0.18.0-canary.45f9eddc.0","@material/mwc-line-ripple":"0.18.0-canary.45f9eddc.0","@material/mwc-list":"0.18.0-canary.45f9eddc.0","@material/mwc-menu":"0.18.0-canary.45f9eddc.0","@material/mwc-notched-outline":"0.18.0-canary.45f9eddc.0","@material/select":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Q9dI7nDNDPxrHSm4lLJdFG/rQe0PLBcdXpcE7xLJzVjC3EM6uROrSkMP0VKANlwqeooyI+cAtb+pSpCgXHp4eA==","shasum":"ffbf36e6055a110b453337672b9296fe603291b1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.45f9eddc.0.tgz","fileCount":46,"unpackedSize":930993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhp8CRA9TVsSAnZWagAAheEP/jYT4m/URL36Jmpz9NO7\n9sqEq1FgO/fPordhmHoN0wd27feFz9cmtXTP8yk1zeq+i29iYcEdR6gP851X\nhUNlaAJARaV9AE7MoviVnZMuPAyfzXMfh7iq4uVY/MG4IP0i4dj53neqWHtG\nzoBGXtRbe6SYk7dQWu0bXle2hsb8P05qBzJn9jnRgBRBc08pKjrCu+GnO/bX\nA/uDcKNLivlIAXOlBFYl5pfk2Mp+gUqKhgCF+4wcNoK4azvpIvWOiapPIYrr\n6MRcOAdXqqXx50Y9oSFgeU8idxXvaHr6qBp2MK5hDMFflNEXG9ZvyZAKlp0/\nxH0qFvnM4wLgWXxjUhoepGWtwqBcw7fw41w/xMAuDaoRvtsVFcabZP77m8ae\nMKIr7KmYMjtvFAExgtuFRi2el9cRscmLusMoko4c6r09bilV6c1+WQXMPkjI\nMNuFKEeB0GfD4MYtAvGVqx1qitSL9uNAORQsKsSW6NgR5eFQSdauejdTIZhB\nhCvH0xHNfz3QtXVNhuaHm9kFjmsOniVnNvrQzVyEmaxTcCDqj4bsJ2XLM1Hz\nq41tHDUT8i28xPtGWb3DUcvWuNbHOp6dVn4qvmIqnyz0MsXJTpl74yyTM7ep\n2xLS5MIv3vYJQ5GTZipwbnXV57oUY1uCON3MBOCx5ecpMLrWqfc+nW1Hd2yQ\nId/U\r\n=LG1P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVld+k63HMEaZaIgX+hyOcR7B/fC/8PI7lirxxNyCSRgIgd2vy6+d64NwWf82i5E5J4GNa85qGMKkTjS8Pn1h6hgI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.45f9eddc.0_1596070524404_0.45770647401925446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-select","version":"0.18.0-canary.b64663ea.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/floating-label":"=8.0.0-canary.f86f83f54.0","@material/line-ripple":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/mwc-floating-label":"0.18.0-canary.b64663ea.0","@material/mwc-icon":"0.18.0-canary.b64663ea.0","@material/mwc-line-ripple":"0.18.0-canary.b64663ea.0","@material/mwc-list":"0.18.0-canary.b64663ea.0","@material/mwc-menu":"0.18.0-canary.b64663ea.0","@material/mwc-notched-outline":"0.18.0-canary.b64663ea.0","@material/select":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vhEZ/ovdL2jwhnIfhaUVe4XzMTOFIuOGYpU7T1+qSuSktvSoxWmygXOAKtZdB78FsL+x+Ls2rBwANM9xhF7OIQ==","shasum":"ee0189f85feaca3051be00adce367e75a83763b1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.b64663ea.0.tgz","fileCount":46,"unpackedSize":931064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwbYCRA9TVsSAnZWagAAo8MP/2+PpgNSWdCoMkiZtgpZ\nWtvsqZGmRh433nmDszqNdv67xu6M0c1C3g+wCqoeXb/PH4PEKlNPVnC9ksav\nmHdqQUSfVe+1G/Jphty9rYCiGlgoFhPngH99LnipmMJElP37F2LjCQ4UWSsm\n7T12GiWk/fB0urWdtHE8Sy3g3UUTUSVwM5jcw3vQ789sYsLEbk0EhhwDEy69\n9kF2bAbIXZElV92E+xPv8cffnWGCgw4/9SVTb2lzKQ384bx87bKBReL0SBfa\nHeWXpOKcYsIQg3VqxONmtfTaLVCTKipgUmhSI9H75mMb/eI9fvUCB4j7kldc\nU7A12kdfyRdlXIRi19CBnGDpe45t6J22XEiQaAZnb/6gwxlH6nTSwK/vq9IW\nG6Ngqxg7XFDkJSxioO9dI4rjAoeyDUHLfeOyWLTypBkTnajFybc2R89u1QrY\nJqHU4lyn3OiV1SJLc9aWJq1xzRXRCDqqIn5RDGowyAcKe472SNqDkzxRojgQ\nQ+Ku3obTgVvTb3ZFwcFjR4SYbdc0czr+ppj2nHdTvrAkW4MOav8qbpfwJIgf\n+WByH3BTYGkc5bE31U307Viz1S2c4/IJXVf85DqETSobtrUaVoYxU1NYGLT/\ntTX8JVS/EgnyG0vd1k21nb39cGYBZtCnGPs4mwvB23mvt3t3OL9e+v6DM5XO\nZ0Qd\r\n=jXz7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMxDDZWmJVc896xoC3NAG7WIRFBTjSH4A0uga76G6hmAiEA9FFuU317zdRkeVJQSLq1X7nl+/A+4uR1RCy11uKF118="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.b64663ea.0_1596131031526_0.9756341485116768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-select","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/floating-label":"=8.0.0-canary.f86f83f54.0","@material/line-ripple":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/mwc-floating-label":"0.18.0-canary.9a1a4d2d.0","@material/mwc-icon":"0.18.0-canary.9a1a4d2d.0","@material/mwc-line-ripple":"0.18.0-canary.9a1a4d2d.0","@material/mwc-list":"0.18.0-canary.9a1a4d2d.0","@material/mwc-menu":"0.18.0-canary.9a1a4d2d.0","@material/mwc-notched-outline":"0.18.0-canary.9a1a4d2d.0","@material/select":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Vv9veXoNEvMQz303S+tf/gNkR2Gewfilu02nBAwJSnVnQLEcWht+bh+wDApgFjlTHCBugE67h1mPAWqhZ2Ceiw==","shasum":"1f417155343405dc7b09e5a5cf1e7723381a93d4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":46,"unpackedSize":931064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzX3CRA9TVsSAnZWagAAAsQQAIRNwFr6cTTVAIUBvQgw\nyjvn93PsOg/M4VpCPX8h/SX0nDnRWrLgkP5P3HLL/NGUvAnEx8IOl9YAYdzp\nrJHHj6o5naI9Y2oactjXrJhGsQGInygOnJl76iNRbYh+guMk48F3S2WtrF7H\nYDT62gFUUMF+VOocW2CqZ2qHQPPkyaQN0l/i5gvgv+FRbn4fnhbO8Dn3H3Kd\ntvMv+iuB2OZdIl7j+x4G9n8+3Gv9OQ6HaPZouQO+7HWhLQHHUuniTX61P4ie\nXdOlXOJhhQrSWguGSoDKLCGhQtmy55g1dgW9OrPHt0eYiQkc1Ozooq8XrAmE\nyrhIYubdjGv0SYwskDDpkrM8egLvUbFzpfTkMZKWQrNsstMu1peV/l+dWUyL\nS0HoevPA8vSAB8rs0z8dZbp3Nml4ZP8OzBcwAI49rMjuSglHqcrybVajJDeA\nnTiPL9TLknBMkHMlWXNrISV8D9rRRFN0rzLQUISzBIHzok/0Gf3/BkDhTd0i\nINsd1aduAWXOokqUNUBPeyb9dQunjLfGBYp93Xy+S2zZZyTKIKkCLSxg664Y\nPvOae6X69qeCGHzBhWpPAShMYDFPR/cK2chFJP+hhuUuC1lq9bqBDLgcGbJy\n92IlERelXkQgQD5q149drr25O5y/eg6LomvRf+6RLCs8r5PqomVdI0N5XZmW\nTp8V\r\n=yqS/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD090v88uuEPhDmEV5tfUsPlB4HvBE3MYXheP6LIvKcBgIhAIDhspmoHCRjoAs8QPcJGUml6LHGQ5FP6QP/qiNCpDet"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.9a1a4d2d.0_1596143095105_0.2709391090323714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-select","version":"0.18.0-canary.887c2848.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/floating-label":"=8.0.0-canary.74839da7b.0","@material/line-ripple":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","@material/mwc-floating-label":"0.18.0-canary.887c2848.0","@material/mwc-icon":"0.18.0-canary.887c2848.0","@material/mwc-line-ripple":"0.18.0-canary.887c2848.0","@material/mwc-list":"0.18.0-canary.887c2848.0","@material/mwc-menu":"0.18.0-canary.887c2848.0","@material/mwc-notched-outline":"0.18.0-canary.887c2848.0","@material/select":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+S7n5pLb7dy4J1W4x2durYvqyilrEcknXr/B3ndxLwQEIpjyfo6w5y1/PWRRAJu1tOPzMS5QbWGmBHu5y01EFg==","shasum":"9db835e4f11848658e1a9ff9e8beb202b36c347b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.887c2848.0.tgz","fileCount":46,"unpackedSize":935465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0RXCRA9TVsSAnZWagAAAW8P/2YGUtFLp4o2eO36tzks\nNbUZ5Vy+IbhWNR1vF1PLN0OJIdIU2CrKCic4pjj2wCCHkqPzur4SwdBWouRh\nOtHiMQHGGLlDwu4RyXctC3OTdSXUBph6rc1imQ1TbKHriHe9U9t5PXJl4pwk\nQutvDpolkqvfsC/LsA0kzwPEQFn0y77y0NcLtd7wrhMJGCez50exdNRNms0U\nJON0RlfPO3AXZQATsbhcFZqqsh6+Yldqttjkr2F+J5lyD7TPJDzoEUajowtM\n7omxhwhyERkVyZdC5NXWxJyfPgcgG2yvQ6SiEFkviRksYrX4ljClwOOQEiJ7\nTfirlLT5istD3IRjCnfWQKbyaPqw9IZ0uHqqiAGrwHnf2kuGcZfjwkXCgGM9\nJHycBwD4hIr2H5eE2cGMdZKvN2mww5tEy8SSAmQr4ev+h3id6xa0kyQp1V66\nNazj24Cj9ZWb51T3HAfj1UwCqMUfu0lrXjLdI34cbfF+6E74ECIAS+r3zxIn\n8jANyGcTlYhaPWgr4k4QOAba3+moh9P9z0gED+rzqqsGQvQ92cC6t9jgWev2\n/Y1rMt9d6/AjmM4k+qvCxHgxOs9jQS7ypXVVZNbtdIheeYxOo/OD9k13dT/B\nPcSuSk8Fu2Si1OYf5ic7jvuX9g5cW/hFZC/y4DtOP4gilhJ97wXxEoNEpuGK\nuBqh\r\n=q5Hd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAH50hDdtDyiqwjIiBeiRTgOVf1TJcm9A+vTarmr00PKAiEA96H/PHNR4dC59HgQy3zPcFgudhxs2a8YeHrQnP77Eq8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.887c2848.0_1596146775151_0.12051789694908899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-select","version":"0.18.0-canary.354eb695.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/floating-label":"=8.0.0-canary.74839da7b.0","@material/line-ripple":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","@material/mwc-floating-label":"0.18.0-canary.354eb695.0","@material/mwc-icon":"0.18.0-canary.354eb695.0","@material/mwc-line-ripple":"0.18.0-canary.354eb695.0","@material/mwc-list":"0.18.0-canary.354eb695.0","@material/mwc-menu":"0.18.0-canary.354eb695.0","@material/mwc-notched-outline":"0.18.0-canary.354eb695.0","@material/select":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-x49mwdXuA+W95fW/DY6h6aYVIslOpUDWr4jlfrrp01jYINsQg6DUYRGGeqJtq1sY6mTXU8DP724hzktCoFDVMA==","shasum":"d1ef080d390f309bf0a9f96d005a012dbcbeacdf","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.354eb695.0.tgz","fileCount":46,"unpackedSize":935754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16lCRA9TVsSAnZWagAAm3AP/0fVrDnZOJ3p27fmPJaN\n+vrEnfJNteqjwqbVFwv03WGR/TZGQtEM4yliNBycsy684zMz+ZsOryzbKDh+\n8n+yQb5MPeyN/fgUD5/1UVl2guGeUGUyk4jq9csMCJ1Z/fuWQ+WfZxN30Fso\nDderyHOZTUR3T1sJwICkR47QoB+Shrt+9cg2WMBLpZOczOhYL1S17B2UrC7D\nFH4BFQECNhfBgTb2jjvR16zFlC2Qe413ThwfI4rvFgThOaL307LbchwOID3T\nvDIQIJW1BEeMYImmQjThdE2ldxiEcsosBT4AuJDZWuPRiX0c+6pyVX41Gf0D\nGUxN2wOjzrRoADdaKMV/dY7j+O9GjCk/n458+v2+l3oUJyHFKXpGIJIcxHjy\n/Ru1hpVf9xum7916KVwexDBdYd10JJn5Ep3bFDYt222wu3txq5i2AQ8TRJq1\nfa1AoANAbwmxevNOqgSJbPshduC/s8zw8/4p/OvbMN6PnyHKA34JgCvgwQu3\nWjojoMlZmdH6ga3jn4lylKOIuCCVneHgkALHM/rLEGu+NMZ+n7fPWfrH/Hnf\np4/3qTNKqnLg7Yto9gweAylEwJgJMTWzE2dRqcmNQmSreCNLndc/nu2ea1He\nh6sUqZ+CJ4A+IPmn0buwxX2I5wWz4lz+eEED5S3Lz8ny2FT2hv7Pa5V0CSG7\nINWg\r\n=t+kT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClQCcDMo9+nZxgLsj8x/L3mIcTuwdrvsXETRefYlOQ4gIhAJP/U670LsCbMH2eQy23hyYRw+NsAtObFurc49uZNYq6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.354eb695.0_1596153508939_0.8377885184849512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-select","version":"0.18.0-canary.7beb236c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/floating-label":"=8.0.0-canary.74839da7b.0","@material/line-ripple":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/mwc-floating-label":"0.18.0-canary.7beb236c.0","@material/mwc-icon":"0.18.0-canary.7beb236c.0","@material/mwc-line-ripple":"0.18.0-canary.7beb236c.0","@material/mwc-list":"0.18.0-canary.7beb236c.0","@material/mwc-menu":"0.18.0-canary.7beb236c.0","@material/mwc-notched-outline":"0.18.0-canary.7beb236c.0","@material/select":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wvU+ekiX3NDKSEIdRW5ijZqtBEK/qRB4x0lGpUjzhPM9iaeoN0U3OvPGytnbUovz3qK1DvLWBz1wkDF66+m0fw==","shasum":"50d841623b9bbd1bd1948066fd5fe10e55615711","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.7beb236c.0.tgz","fileCount":46,"unpackedSize":935754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFe0CRA9TVsSAnZWagAA54QP/jlbGpVinVOZPDiOBPy9\nkZ57sm46MBtWcWAVKUn66GJ76d0GUQ7R74gJpQQx2eLS34q7YEAVSHbCdQkh\nLmfa2ohEcMltOVDiH65Hfaa7yXOmpfZAYddWrBgJ+9QIG3ZLi7r1D6E2ycF6\nsYi24zI1sHqlSPWPRpBxQwnIyhrrfJKims5eFXbuWbofV2fKO3kPibFqgTq+\nW2U9hCTYy4q+zNPKKICpHzrMNw/PaZmvggdDFpDcfWubmv4dWL8MBA6B6Z/t\nKuCT64JZ0g6t5E5tvj6usO9MKgb+dmy5Wd/jjg1bAYv3uioRh98Srzq/seE0\ncNzYIZ60IPQZCc6fnHPVlB10ACTnfbtnHJdBRj3PMxVpm9g1sKbmXscdIrz/\n7b5c3Xmvhm8UGVF9U0Edf2CjxLkJL3nfget9o1KAlOIkUkQY4kWg9u3rB0nC\ngURZ/flsiPGdwud0OcLeb5HZLc7BxAD1G7tMnv3PFtE6svrUFmX7p/5lYZxR\nGXlAtYTAzMT8sqsIvIqyLXK8gfgUnoSJGDVGve10Zg7tONo5FMJXdOTkbO2L\n4rrkLaq9eMTGHSMGZnCxqgbuIggZLREmBbcIOTvRWQ/Y1JAUM2swZLkbnrRo\nt0luKsINp9iYDpLbS3g2sOLX5zkLNAb8HqINqw1mxIzd8ILCxTB/4ktDA+eK\n1XLe\r\n=uQoj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDA2ult4JI4Ae0q1q36Q/CLJw8K3npi2Uou7kwY/FMX+AiEAsTmB6ojfyHdEqNZJqWLwPwcQUfekWHe4GqUjIZmduAI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.7beb236c.0_1596217268134_0.7906417355378623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-select","version":"0.18.0-canary.c44acc0c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/floating-label":"=8.0.0-canary.74839da7b.0","@material/line-ripple":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/mwc-floating-label":"0.18.0-canary.c44acc0c.0","@material/mwc-icon":"0.18.0-canary.c44acc0c.0","@material/mwc-line-ripple":"0.18.0-canary.c44acc0c.0","@material/mwc-list":"0.18.0-canary.c44acc0c.0","@material/mwc-menu":"0.18.0-canary.c44acc0c.0","@material/mwc-notched-outline":"0.18.0-canary.c44acc0c.0","@material/select":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/LvdSYGiueQrrLOtiiUZ3KM267EZBDXeff/KMMxrV5biRlbvxmIqwp1Y6BSO8befzbnc0TKkPCon95o0qrZUBQ==","shasum":"29d49aa2c2092ebe9ad00e5f397990bda61ac4e5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.c44acc0c.0.tgz","fileCount":46,"unpackedSize":935754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIkTCRA9TVsSAnZWagAAY1AP/jpxTEiRASCE7UDJeL9A\nK7NT3nrjmCbV/phE11Yr57SvzZ5UH/fct9Yt50acNHCKsMEQpRC5Uloa19+t\nI7bTSgvVyLvIYVsSBb8fnC6H/iz5K9qKopwaPx2pIHI1gVAwlKUKjMqGwbMR\n7TdaONPwXg694mSDv7bDSw/FIi5qcRDLl90GM+Efa5HPf28NYlX441bPiDqk\n8rUy0j6mMNJv5zqOdxXMnB4SZryOvPDek4xd2eKknq1bjvN4Kk+2z0UHz2Kc\ntyyyFQrVgVMSpo+y/PB2kFxEDqxMVjmOW0hb6zOpJNr2z0eKbC37wlUDSL+R\nxkHMnenN5frwquL7pl64LS3vkHPO5FJlUgU/6d1S2X3AV6EU5KIrRjhLfypP\n9FoQ5IriCfgKl5JpwAkrxMBG8RyP27wvYvEDbhuOsMUgftPpwGy/DXBn6+Yt\nBVvwHMYZI1IarckU5Zf1BBKVhKWYRE8qCPgkPEJl0bvp62Shg2Lb5UsQcF86\n31a8k447Ae2HIOueMs65EvbAc1X6GDbnUg4syu74/qIM1ClXZ5gEATlEi8mM\nY8aobNYdiyHCmL/3nggUGUb3mx8Y1M25vMp2C2tDobO9Hn4wMkFndG7K6TyM\npPWCMantlRVr4aNzbdEEUmPmugtsXndKPRUZNrCAaowDvaMRKbdHAO9ecZ3O\nwvO4\r\n=1yNd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxS6PUQPDEL0OGHCa2/t/8bPSn7RLhaR7OzZcK9ziT9QIhAOUWcDQyYCqWGsn9/kKbbdaxlsI791cBqUZBCWffkpN0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.c44acc0c.0_1596229907062_0.7883342413623831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-select","version":"0.18.0-canary.779853ff.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/floating-label":"=8.0.0-canary.74839da7b.0","@material/line-ripple":"=8.0.0-canary.74839da7b.0","@material/list":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-floating-label":"0.18.0-canary.779853ff.0","@material/mwc-icon":"0.18.0-canary.779853ff.0","@material/mwc-line-ripple":"0.18.0-canary.779853ff.0","@material/mwc-list":"0.18.0-canary.779853ff.0","@material/mwc-menu":"0.18.0-canary.779853ff.0","@material/mwc-notched-outline":"0.18.0-canary.779853ff.0","@material/select":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NTSwVOaRJt1X+Au+0E3YqyAvQxH5qU5Hj7J1YmUAbA2GFwlzygRRqOAptOkPF3Hl33LX51Wj38lgXo281WN9bw==","shasum":"e52fdd7ea2294a7266e1bb43a9728fd8374ece0e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.779853ff.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEhFCRA9TVsSAnZWagAAzLkP/RZI0Uvil1qr4qp8hlON\n4g3UGk7OqtrTL12O3H3oMdfm+uimcBOVJENqKow46Se2YBDJgxj70xfIRl9Q\n1Ihfabxw9f/eGTZonuy3DX2WXEluy7AaCJk751mNbpnjU2I89f+YyicAflrO\nzfElBzGR6Lok29eOktac2T/OkhdxaG8dQ7CoT+sFloeU6DmBak7/R1i6+yDu\nYbeEyZWaP4ZAR0qQLFVvNyxHEUs91LX01dhK5pyQDgvHQ3wXW8GUANkmN5RE\nZ8udOBcxAbvzuPNTJ0BgG1il2cZLJhuvBm3crG6d/mZBDJe7gj/RGhYgCYRg\nFsWdnfsw8hF+A39D8G0mZhwKFCvBW7ZfLJ6khy5mfjhO0XBzYcRSsS0cgsYz\nt/T/YLWrVtkC/t8lMlcMHT4jzEhM1tSQl64/6K68OHKfTeIZPZYzHtJ2Bt/J\n8/WmvSPFPOj8h9jUj8x1jK9YYSV8K8cRPYnW75fO51fZrS2BkpEqQZfjHhrL\nUSk9CW2dQQGECwfKcfQBQnFKjcccfWCXxG+/AUcbi/6TuUKQ8AUY21vuhFBT\n9iGFjan1XC1YkR2FvvTi2zt6j1XRv1DUGCkxV59Z301JaCRNeow/I98DhqH9\n9kz8Bil48qV/Qt3+319LmkNWVS1BecTHl3n8TOxUCE7IuYox7VbbAHVcPDVt\ny/K0\r\n=UKWi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTJJWaTdmJkImbglvxIxV8pSu6X0EzNxgoenXR9M4mFQIhAODbiBEBfSmhHBVnrxa6rU+9HIsEGfHhsq6Z/wlaes2x"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.779853ff.0_1596475461219_0.8724160872280249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-select","version":"0.18.0-canary.8aaf270b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/floating-label":"=8.0.0-canary.74839da7b.0","@material/line-ripple":"=8.0.0-canary.74839da7b.0","@material/list":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-floating-label":"0.18.0-canary.8aaf270b.0","@material/mwc-icon":"0.18.0-canary.8aaf270b.0","@material/mwc-line-ripple":"0.18.0-canary.8aaf270b.0","@material/mwc-list":"0.18.0-canary.8aaf270b.0","@material/mwc-menu":"0.18.0-canary.8aaf270b.0","@material/mwc-notched-outline":"0.18.0-canary.8aaf270b.0","@material/select":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oCMLDila0Jc++IWtSKPWrDkJcz1s9jYmE73zxQRxEBVDSU0d1+Xor8GAtJIkiP3e0N5WxXaz2qA4Vgzvk9xv0g==","shasum":"00c551f643a9f1811aa40b7531afcf675fdfb7ac","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.8aaf270b.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFpVCRA9TVsSAnZWagAANAcP/23+D/Mb1hTJauxw6hkM\nB6A2Dk5rgjUuTb59aegj+jSwWRrdwdnwRvW41fbOgxCkP3Fb158G/2DekWPg\n7e3R7oE6mXQeX3Xvo0+HpFMGqftXGuBdYPtqorEEuHKQSgPBg1+bQBYwvFHA\ndXgrNqZNr/qOuc+6LDjAxq5s5rEJKPHv2xv3YxmusKfvGGydTcQSE5zo7CSD\nfzyIANU9Cs/oYz4TwR0ypAYgHRZtmg0g7+RGtLQ+x2sVP+ufyJYHV1YLkWH9\ndVO/aTu0GnxqSmJoVObEGfNyprPLSASKTZuqRGQdUpPSzrfnR9XJvUoxn4dT\nCe4bTxz4fsLHm/KCR1nhFjYUySiL8f28QswCcitwK4lfwWn0aT+jRj9Turle\nKqATRMoge3MY94OrJRVXa33bsczm3rhk4OjnjjTkXHT4vQWXKEPfVt8t+qgo\nL0W5LeNnfaJOq4DcmOQzP/Tih9ViUcyUT2Yk54uA1Jfp5NtAbRe01s+fu+lc\njUGz4yn59uvbPZ1bkCZxDZOW6NnrGQX7fDYNCY7Lban+G3zAUZn89Mc9QqIt\nRT8NKSGJ0GvKqgKgjupmHFWWeGK/VRfJmf3WjwWq1Xx5OIDCx33h67Yqi9ZZ\nxJPYJkaMjwhcc4SeucLHO92kMgOuDS/F06a8c8jcGIWhxktcjkWMsbUrWC5o\nIvoy\r\n=Emb7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBosLeY5DHJ82NRHhGgNEVbgxxn9OiHw9nB+eVQAIsKdAiEAk0Ynbt6sHdSfRaAdbOBummKjRRCJ2CVDWwbJdZsYmRo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.8aaf270b.0_1596480084601_0.4613091123419071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-select","version":"0.18.0-canary.5cde9f12.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.5903d39af.0","@material/floating-label":"=8.0.0-canary.5903d39af.0","@material/line-ripple":"=8.0.0-canary.5903d39af.0","@material/list":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-floating-label":"0.18.0-canary.5cde9f12.0","@material/mwc-icon":"0.18.0-canary.5cde9f12.0","@material/mwc-line-ripple":"0.18.0-canary.5cde9f12.0","@material/mwc-list":"0.18.0-canary.5cde9f12.0","@material/mwc-menu":"0.18.0-canary.5cde9f12.0","@material/mwc-notched-outline":"0.18.0-canary.5cde9f12.0","@material/select":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hMe6eBIyI4/TnLNUC/QMt4uPVkbsHcPDN6r1bZVVfvd1L0e/5QwOYEsVwm/nFqllk6PUtReCL7tgF2AYa2TfFg==","shasum":"e647b4e2dda2824a242f591b40f9c7395be4c392","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.5cde9f12.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF8eCRA9TVsSAnZWagAATf0QAIirj9woa2qyDtYCeeYC\nPJOy/52FYUj2ql8ispT9QPp1A/UJTbvIBQ8eWutFotNV76A78cuZUOa5QoUB\nPZ55NGUsynqYcXZ5nalQou3Id+0z27GccvlnDlP4WKlNPoZBAJJVTYn+hFsM\ncRvmrjMbryIfo58rbfY2ysto8p0NH0sra5Pl1OUyEe2lYdHQUo3kJ9m50/tU\nQXvz6XlQTWdQk6TvO6MDBfAMTXvgrFGgZdJP3F79UbRk8xLJgamBsBimmp5m\n7MmY1bHsDR6ofHnx00ZJKYb9Zb+9QFXfO1eiSpbk5GFmFK6r4PWS0FrsQoo9\nqNbY9usIHlCauAgf6RP1DOTqM06MrmSS4K7wNj9b5qtjRLvpwkYIqA/Tx0UJ\nvzpx0P8R32LfguVG4n2mS/Cpx8GCCeQng3jmEWLFIQmFzFXY94qZ9ujKCJs9\nWYIDZZg9bvLaG4pOF/AnjZbKL8ad+xWQP7GiBKuCHD7v9roaCGMxxPEndHvL\nkotaMgGtrF4qq9i3HjSmmvagaAxgmsDy6O6mVmdSxWEFABdoicXITfTjM+mr\n7FHQESk6xkXoSdLjnVQGABP9JjA9YJRQ9eIvf1MMS4EVe1spzJsyV4uCXEw7\nNc5Q+G0VgfuqplW9z38XN/SO0cPXP5eBSWwtm7XmincNATZDLAENoPiA/Ivb\ndKKb\r\n=dkoW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnaWC91MmAqEZD1aISwvKtSwSeqIj5GSoytUJUSpljZwIgZU0AC/OWgdmbGLbNo8V9/tTbuSRG6joShBy2fwYfSlk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.5cde9f12.0_1596481309863_0.869076452300251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-select","version":"0.18.0-canary.1607ec53.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/floating-label":"=8.0.0-canary.096a7a066.0","@material/line-ripple":"=8.0.0-canary.096a7a066.0","@material/list":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-floating-label":"0.18.0-canary.1607ec53.0","@material/mwc-icon":"0.18.0-canary.1607ec53.0","@material/mwc-line-ripple":"0.18.0-canary.1607ec53.0","@material/mwc-list":"0.18.0-canary.1607ec53.0","@material/mwc-menu":"0.18.0-canary.1607ec53.0","@material/mwc-notched-outline":"0.18.0-canary.1607ec53.0","@material/select":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Cya6PICtc9DKbrqaoUV7AZJKm1KCgEllS9tC68PzaQ84ysmD/uQlijImZV39XnonYJMHdUeR/Av0uyMWpnwKQQ==","shasum":"2f1324791d9b164ed03127863d05bf0ac661ef20","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.1607ec53.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGnMCRA9TVsSAnZWagAA6rQP/3AQPWtciBn44N87ySuz\n0Ld8Iot10xSx1PtijbdzccApfumSh4XE9EX/j7dH7xDqhKanre0jff6Rs+Yg\nqfVltxWYqKXQS+8Lrdujw3d/RiY6C0cc7A2E6eBPrCdqnTGtnMZ4S0xE1hT/\npCM6+3ciAfXYDLebsBzJI1GkTS8isA4aAFR7DXjeDExBydmzUnKSmCf/UcFz\n1zH55JR+GiXM9N5tw8/FipWKdlO5kB4pzvXZuiapM0sDt7vTFHV0wV5do1fj\nyLsyK+h5VzbzeyGrBRnHyiSGT1z7aAC4uWe8HnQA7WeJU2Qdealm+KTRPrqQ\ndyiRhu2eLLgQazGa3IU0VwNAzFyTArOrQvzEfgCiMyX0sL14SZ55eUit+YhG\nWT/5Fzc/YihGXrdqhEqXZiynKV7HflEOOSefdhZjiY1RnAFx4tUzwakAM77q\nN1xJhSmLpnzDi7uIbR4Kl1BNI+ipnLkSweUtecy6jgRup8p2aEflLiu7vfJ9\ndiM3JWTkUvzV/j/GC5JaUZJkBJy/WFdYik5aeUwtA+XMAPeTGnK5yx0o3lbI\nqAWEbCsa59oT4A3wU+ngzAR1vwzD7Dxtvp2glUanjOdnDkI19avoLBa67nFN\ntnPfVAsV/lDacWD40CTLkfccy5jkv5RRaeExGLJvqItATovxayFvzXPBWvYz\nCyfX\r\n=MNy2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfiEnMtczeBZg/XjdkRRWl7fqZUqkjmmSHDiIbaqxUzAiAhxx6oINK80sDvIz1THdd65Hf30OjWBk1wOVJO+poFJg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.1607ec53.0_1596484044143_0.8129603717786134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-select","version":"0.18.0-canary.678b30e3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/floating-label":"=8.0.0-canary.096a7a066.0","@material/line-ripple":"=8.0.0-canary.096a7a066.0","@material/list":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-floating-label":"0.18.0-canary.678b30e3.0","@material/mwc-icon":"0.18.0-canary.678b30e3.0","@material/mwc-line-ripple":"0.18.0-canary.678b30e3.0","@material/mwc-list":"0.18.0-canary.678b30e3.0","@material/mwc-menu":"0.18.0-canary.678b30e3.0","@material/mwc-notched-outline":"0.18.0-canary.678b30e3.0","@material/select":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iRcbsqziFoam2SM9V0wQ+WObHHE7sMMOwIQd7qeyahyhxBHkNYDw0QEQwNTyeq8+mqTf1Sqifx0jv0EbD96MAw==","shasum":"b84ff4b37269030d5c4523030633d8877b3d3cd7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.678b30e3.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGq0CRA9TVsSAnZWagAAWfcP/i1C6mMPYfhHNNTwDgEN\nGIpHL8fLAWQ9sPJ0dKDSrt8hEKtUVFLf2sWTc90d2e+A6wTl8zc7OKWMrFjt\nBd9/av7cAs5Xn8tWcAHdxoILczLDi7rUjlgJU1S39jfI00f2PttVsJT/cWXG\nqyLhlAw2HAIlpDOqntSOqhJ3K4YNBapr0buaONlx8jNsE/D5UjNszFBpsSut\nEdeQqTAQhl+kwwxMXpwfPmEzFd4kVEwgO3WlrIlf6BYiabbVV8oPuw5h+yi0\nx68TSdbdjT9uvwnCIhkCnCDAdCzPK8O5QChwLPZ6EHx0FOqYdMe3gzr5tf02\npVC6B6hgdo+X+hv8YeVsg0B9Q5vA4ig1V1+98NMwMDYH8wa0p54sEA9uXBGn\nup/xa793/Wrnao0H6Hi4Rw9gbMw1mfV0aFYXDzyJN6FkLoGpm7YRoRLqvPAT\nvjeI41+uqjd4GMREZVRFOiJu/ljMhCqs6SXIlHBr0rcf1Tst6pK6rEQ+KrUb\nxBr+ytK7R5nzFr8wxml6lFDYBfoPd2QLkB6g+8MIyr/k8d77XfsHTlmc5fOr\nkqvcVoHETeMAj9LZiOZj7h/cu8gynlXFwb7bY3NSUDYxtlpAshUZw6uAk8o+\n43SKjatwOTXcIkfgn01kZwaPRBJgtP8stx0M5eA9mT2WICidnkzj9lLiGkMu\ndIXS\r\n=QCzl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBM9tQcJq6xZ6plMvDAi7y+FJDE9vdUam+ofpmZcSf9tAiEA2VavE0XsNTBQRsrn/Jv7pwowqnOQY0nafz5x27Ob3i0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.678b30e3.0_1596484276493_0.44757765209295575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-select","version":"0.18.0-canary.21c55569.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/floating-label":"=8.0.0-canary.096a7a066.0","@material/line-ripple":"=8.0.0-canary.096a7a066.0","@material/list":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-floating-label":"0.18.0-canary.21c55569.0","@material/mwc-icon":"0.18.0-canary.21c55569.0","@material/mwc-line-ripple":"0.18.0-canary.21c55569.0","@material/mwc-list":"0.18.0-canary.21c55569.0","@material/mwc-menu":"0.18.0-canary.21c55569.0","@material/mwc-notched-outline":"0.18.0-canary.21c55569.0","@material/select":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xndxzAar6JADmR1xgz3sOTEPftmhOAJk/7OTRon0G0mF63WZSv/9IX0YF5LfzuT1J2+xOshk6V+lXzNOc1eF8Q==","shasum":"ca8808ca8bcac277f434241c265576faa502d4fc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0-canary.21c55569.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGwoCRA9TVsSAnZWagAAkmsQAKUWtfYkN6ksTqpFecKh\nfhy/M/n1/xTunpmcbWvvaYsvW9fa5aQswy2qdJ1F0zNETKSth6i+T2hI5wdv\njw5taVViAkVr0zknkqSHGBzy/49N0JqB90W1Hnehdgh/eXy5lhTiRmTkGoaV\n4TuidhMy2DvjfjmEUc66Ill3xQynTSy9hjcUpi7H5htzv1qnI0+MxMf1VHjY\ny7TUI5Oh/ZsQuDoZ8BmvGCaa11eEjVZyXfgj/hetYdqw323NqRKMQxmg5RfJ\n+25UfFMGxI76dzE650YWEHX6vOjTRmPV/xKlFjpaCRVUgF+vmqpP6xLHPb8R\nORwFGHYgh6EAUzLH+eYOoiuENw9qgZX43MhNt38Bqhap7QqFCRwDAJ8+4SUL\ngXF9/NZ6IVy8M/KBTF0/9TIXaK/0xyiDiIukXz/nrki6kl7WKJCn94qTfg0L\n9s/jQV4GuHAkYlYWpLMmGeZoaZQGmkkCFiikdvsjuey1uhfzRK8kMDsJeLpw\nQ9g+OlECguyThzEW6tjQifVCaJLohIOkmmE4YBiQgYYGFX1bRV0XEI4NtShd\nfLKdWQQmxEOIZfSeh0OfFgFrqyNlrLRjwZMl8MI2dJNZ5ash6Bi7R7vwo4vu\n+G0VnXypg/qcE2Gq6mTuGq620rDaOmoYnBReSzxqpMoREq3klYc/uwszNlso\nH+4D\r\n=GOm/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfAjTyD2MXnXvTO0WR2jleFgA/N7/9zg1Oqaw1WeYT0AiBuhdChyw0p46HVGZ34g+B9tyNHEhKuC9pyT67LzvSyFQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0-canary.21c55569.0_1596484648540_0.8010543301988544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-select","version":"0.19.0-canary.907d4d7d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/floating-label":"=8.0.0-canary.096a7a066.0","@material/line-ripple":"=8.0.0-canary.096a7a066.0","@material/list":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-floating-label":"0.19.0-canary.907d4d7d.0","@material/mwc-icon":"0.19.0-canary.907d4d7d.0","@material/mwc-line-ripple":"0.19.0-canary.907d4d7d.0","@material/mwc-list":"0.19.0-canary.907d4d7d.0","@material/mwc-menu":"0.19.0-canary.907d4d7d.0","@material/mwc-notched-outline":"0.19.0-canary.907d4d7d.0","@material/select":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zmmEB4exZ0TXR7Mt3DGLDIu2E2qIOlFPWr6Ql5aZYJnJso0HcQcGFPfsNPFFhFOIXQMV3ysgeJxWSXg5PuFURA==","shasum":"fe7aa788955eab1c2f258e7552b49b25db7234ad","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.907d4d7d.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIA6CRA9TVsSAnZWagAAaL8QAJlek2g3CdJn/7GaERBY\nfKjzgJFKNhaneSNRN/PtRCmpFTrsmqHHrWCqTKKsdnnKiE9ICUt/aPIrcGKB\nsV+v8enHCqvYHIw88PmrkAb7x8J1viQaWrjV7Cq6xvF66s+U/nF7GHw67RTU\nhSuG8vl0XUvwZcNrJw6irx9Wt5cwqMDxOSC+EAUkgo6Npxwnd7xM2vE6Fr1k\nLa8ECphGmVwD8wFIWI8ssDd7bfKvoRYiFUKM+sa3+pxnrFvee3JD1t+jp12j\nA7VqHrgF/m/VLiGYMxa/bsrIYQnVbkpikk+Cug/z7ZciBVQqPpWYmk4NIpOV\nz2hsaz2ubzACTh0Ro7FWUuaCB50EuRoQxgkvsWFs5cL67ZdBomTRzKJymSgN\nMaxcPKXFhSz6srvwmdYrmuGiEAbel9xh6ybm+30sVC3MQrNvmyE5WURuKdLn\nolnY008uKdyU1bfSMX9PnAtb+yn5Y0+KjQfFJ3KEubkMbuxwoa+jCGLatKzX\naQ3r77aY+yQHQ9NusrH6XlCsiPqwIAIy8jjktEJ0YxHWFvnS+PcNXEXCYk6X\nFGHuY6NRnNzvmj2N4HNBiGMv8oK2ECa62QWQReesfc7xcF6446IkXBBYML2H\n63rw0tPT/w+Fun0fKEheIJcLbq7S2daLPARJbBmf7REZcbLMalV37F4JJFdw\nCzRL\r\n=TE/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8MZ/VkobL4PVeyzVOXi3Tyvm+wHEhCyg4z8OkkESNCAiEAwp7iTTm/Tu/TT5QcWeRQhBb3iCTabUkG6OOtX66+fjc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.907d4d7d.0_1596489786195_0.3898809196077542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-select","version":"0.18.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/floating-label":"=8.0.0-canary.096a7a066.0","@material/line-ripple":"=8.0.0-canary.096a7a066.0","@material/list":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","@material/mwc-floating-label":"^0.18.0","@material/mwc-icon":"^0.18.0","@material/mwc-line-ripple":"^0.18.0","@material/mwc-list":"^0.18.0","@material/mwc-menu":"^0.18.0","@material/mwc-notched-outline":"^0.18.0","@material/select":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-xPrCVRNIkzN1LUszgEC5YrmYs9HbzyNdhGDjfODKycI2tsJl4bF82KbAI1bz8xDalKrNh5wsKQkY56LsLTnmyg==","shasum":"2b064a83ab2c7f430a93ae92c191b09343876668","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.18.0.tgz","fileCount":46,"unpackedSize":935668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICnCRA9TVsSAnZWagAACNkQAJ4PXsu4SFc1emDbl97d\ndrOCiMxxWrXToNJPGZ/o6t1hNz4QPFGje+lXLmHYPkMmvGsIgVavwAyTo2US\n+AGJw7s8N0fbzBfQH/tkLPW5V3CULKUapQAMBlQ/jWIJmMRumrPc7hF0U7Ek\nW/FJNk0A2wYpQgQrVHNFgWGING6YNG1iFBP3LAyvd4TWzqdaS0xzvnHZUdCW\nOvDdOkteJwpU71pvdZSCEUjSwT0+0shMoJehZj7mO40VQbqiLfJItWBu+0Rf\nRObOyAVBrRIUwi7ClN6C3naOJHLOlbvgpM+AvVbWjmMjy/11O5OkwbhdWacC\nwhf8nhUMvMmw0Tw4WC9vCi8/AaV0bSMx1nI6kO3v/CzvaMF5V/vi69hrJMan\nkvCc75Oi6US0AhGZJHLMYzPzqbxH421EvoUpbaWP50+5rGZlKLjLP+1zBryq\nByN248OGBsb6p81qC2LLYCQPJ649cOsfs9A+0/5eD27TD/CyIyZl4Em4fj/5\nPXAiPjLG68TRopBeY4EPuafPyXH1k2tONHEubvVsKydK0SnhucXHMpW9dGQ4\nyXF/iBjJlj2F0GuvCbOvigVTgO+VYfhyf17ywJEjunJAF7jq79UkuRzdqJ7D\nX9GkQtsvoIpKpbHnI6HvpMtNnt8k7mB8ce6pDGo8vzW7AmWT3UdZQ5miKfEK\nXyDM\r\n=MGvB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAN62dnZPZcQSA4l7u9PhX6ElmKIZlqA+6DPD0yUsmnOAiEA96prIWE+6sofLUq/BLdK0Af7L/0h63cN92CZQlsfb2k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.18.0_1596489894498_0.6853792210918108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-select","version":"0.19.0-canary.f7958e4a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/floating-label":"=8.0.0-canary.096a7a066.0","@material/line-ripple":"=8.0.0-canary.096a7a066.0","@material/list":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-floating-label":"0.19.0-canary.f7958e4a.0","@material/mwc-icon":"0.19.0-canary.f7958e4a.0","@material/mwc-line-ripple":"0.19.0-canary.f7958e4a.0","@material/mwc-list":"0.19.0-canary.f7958e4a.0","@material/mwc-menu":"0.19.0-canary.f7958e4a.0","@material/mwc-notched-outline":"0.19.0-canary.f7958e4a.0","@material/select":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/2wRI0vadX34qIy8vGaJzS/8RaM/Ux4FSAge7z6m5ZybOecRzFxz43ge20GnEOmqSAjQauBX8/d7/kIqLbrteA==","shasum":"926aa9b307bde893656f6832e7612d09bcb2e415","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.f7958e4a.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLlCRA9TVsSAnZWagAAWo0QAJdDUOXrH5jxOCdiFZQV\n9zJt8hmNmV6mpe3R62AufyOalHsqXxPrKi+faCHnfGn2BdWD1ToMO6yXH/So\nZXrQ1pHxcZIotU33P6bTkGPdZrjntV+5rI/LYzAWGdzFMUSC7xVSeqTzMxmR\nTgvBth/1GIJVcvd0nvVKvTHDk6zXzB4efmqjtKePHi31FCBbVARt373pb8Dw\nBJwKQErAMf2ODVFAL5AonqQ/Yy3IcXdSd2tXkhEMTFRO/wD/KWw+c4VTvHCY\new0Kq02NuaP63kfw3bV5hprGym/7EUnJPEnVG68wC7qi3Ws/2UtZ77gsj5P8\ndRxHrbxonoueBpKZ+iyLJVUgl5gPHb5u6IBN2bDupdA7+TyFpx7YyKZ4pVh+\n9rEUIxw3OrlAoId8RWetsMBUew38qL/Xmzs6ARszSCpFUpfnxKQuQkNJRRfe\n/XiT5OVXlie56D7t4yNrsI5mf4JZI0/+4is5aJERXBCvRcjeR/3odr4TwjFh\nzSL4PUPwic53mpnH7uhoS8D7HLjchtZ4JVLXXGYkmGjOLh7bKG5dovlQ0LN3\n1mRyvdWNWGA7vn49bMRe0bSNlDCMXspA17WSPQ79PoP4K8p3ckwRDAvUvE+5\nsTZHyynXF4g4VKJLzpt7zLY6daqckPe0JrZ8z5XEVpf6ZUXEWKolBkmer0k2\nziFc\r\n=KF8Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7+FZLu4BkakiXqkZcTwiUdbyqOnJxiIjxJ2sigf3txAIgGd+RqRZ7eHdZqXYUJiV66relqNBrtC+pAVs5lp+AqH0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.f7958e4a.0_1596506853013_0.8913374306774897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-select","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/floating-label":"=8.0.0-canary.1b44b43c8.0","@material/line-ripple":"=8.0.0-canary.1b44b43c8.0","@material/list":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-floating-label":"0.19.0-canary.f8ceaf79.0","@material/mwc-icon":"0.19.0-canary.f8ceaf79.0","@material/mwc-line-ripple":"0.19.0-canary.f8ceaf79.0","@material/mwc-list":"0.19.0-canary.f8ceaf79.0","@material/mwc-menu":"0.19.0-canary.f8ceaf79.0","@material/mwc-notched-outline":"0.19.0-canary.f8ceaf79.0","@material/select":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5Qy+xY6lW3+kVD9z97xP6tbdcsgDFwcmTk4+5HgdHRzKhYvwYem/pREJisWeoKpQhO+UN9qKoF84ReK+C6sxvw==","shasum":"f72e10b45a4a16ebb365d87f9bca20fbdbcc1d9f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.f8ceaf79.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbSYCRA9TVsSAnZWagAA638P/RuvgtyhnowsPt4X1NDv\nk9+y6EGAeI5gGGcSgGQZ/2qN9fJBjGep/KoNb8g/hIw6rs9BAYbbG+CK5WZ4\nvmVrA7aXUF7DIId+GCH0paRfRTOvt14nm5yuzBPWCL/kR5zVWvHo58YM/2Gx\nOzRMcEucf5CMqIcD/2IH2PiJh7ow8GDiL8K2QJQLA0dYhtBjwq95wz/ZjFVV\nY8ivyzY3JArPFdJCUD3ObgaEXcrJD+teGOknpgP7z8cVpRlEeDbUK4SaMgaF\ngvc8Z43Z25hcPX2BQkzg30KBW6gEFnF/GqHT+Ihr9vgwC3wRBnQVG63m3ZKb\nlz+/tilzhUCNrVjqpVQ2X+KNoifURseKcXD3umx2NE59w25L8uK6AVwioOMq\nRpk4yDROWIyZwvy462hv96UP+0cn5Hr68RzN6LEj2FQ+VegTymFNvmcozXSI\nidfMGfo6kEQs/kkHjC3uR2e+/n+CUxa0+9J6KiW/OEkoUys3WqyvqM4mHwrW\nz111rBKsdTFCTCl2XdDVJWjSOUH8V93/3zh2j4RoQ20nydSeSiVTKoluoQzT\n1QgLdqGLZKDtpZcpTd1EdSdYr/sR7E0U6T0Ny2EBdPzpGjIYNlABJ+6qR9L5\n6Dl8jTZKEHTkFrUwG7M0veCPqRrDv1JcssG5mlVx283uZqCQvpYZLzeCO9EH\nOhkh\r\n=EmvT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDucWa2mmbozzKDjqvqilsKntSrLEgQq+NahgednZPEkwIhAJvSXpVpiNrCj1u3ZPc6a69BjeLzvqcqUijVfOHxEaPV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.f8ceaf79.0_1596568727859_0.599748578428325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-select","version":"0.19.0-canary.6b9e385a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/floating-label":"=8.0.0-canary.1b44b43c8.0","@material/line-ripple":"=8.0.0-canary.1b44b43c8.0","@material/list":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-floating-label":"0.19.0-canary.6b9e385a.0","@material/mwc-icon":"0.19.0-canary.6b9e385a.0","@material/mwc-line-ripple":"0.19.0-canary.6b9e385a.0","@material/mwc-list":"0.19.0-canary.6b9e385a.0","@material/mwc-menu":"0.19.0-canary.6b9e385a.0","@material/mwc-notched-outline":"0.19.0-canary.6b9e385a.0","@material/select":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7GwH8WZCo+Ql6N73B/P6zxNdhOPXHwNnsL8wF+TmgjgFMnv780duZkNd4eeK+ncMWNpM7T5KJU0UvhyUhEqBaQ==","shasum":"2c80de72f1832e3e76a8f65b740c33c6c9394366","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.6b9e385a.0.tgz","fileCount":46,"unpackedSize":935805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdN2CRA9TVsSAnZWagAAWVEP/Aj4+ZAaziU+ESGImh2x\n9VCKeuUlQ9/LylUsuU+JA4tlaQuNofqvbBzTtNYRsLqLXQyQkjmw7JhRMGfI\nkUDcHrv3CdmzqvKIpPwM6BHFjuWp5LBzvp6D1PPmwT/lZE5JEMa42Jav+N5z\nBjnQVX+fGPt+83kJ29+ox9+QBkc9T7bCq+9oDsqx60BVoJ3YzBgDsiOPPUoj\n1E0fZkDwAdXwQvW7QVtnKPoSGDFwPZRKu95oL2qBRpkT2PSeUmQFnCX4F495\nZOryF88wUMv65BMvwwl/7PQHJpzyQQd29Ti54xDtWl3D54zImP8lJABgaRkz\nRAVAVTIARh+9F4gQefLLE5+f7Hh1px2aeS6yyUFHfFvlZoWYlQZMBYmHyHu3\nCPZgfPCBxoygTWpN587ZS+lxzarLthnqo2Uph0FWrFAsHD0DarDGAtBzSqUN\n/YdqJSFJzOswAVcipepJyQSkLjmpK0zR+4WoDQRKwYo5GUUCLHXHFklxnfNR\nMC2QbbiCYp80bHCaaZwJG8gfPyAe5WdngkBYepIq3cNP8+rcV4MckQw60UfW\nCylRWO5nD7W4xOFq+QX2HqsLPGpOFyUbtfoTqcRIFguKKivfEDr/ffNkCT0d\nKFBW0iph9Ygu5JEfYD9dG6gJh5TmGTNqFTKcMebu37ak/VdmGPrPVQptQZxT\n9IOl\r\n=fsb+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUxNI6AR6fQSqC6n4nCDBKEaMVf/Wa8fu24r1a4xGHOAIhAJs8YkNJ3FZwFI8ErgN9iodky/wUO2HjYdYkXypfwYBj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.6b9e385a.0_1596576629800_0.41075570303626874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-select","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/floating-label":"=8.0.0-canary.1b44b43c8.0","@material/line-ripple":"=8.0.0-canary.1b44b43c8.0","@material/list":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-floating-label":"0.19.0-canary.9a7e6d2a.0","@material/mwc-icon":"0.19.0-canary.9a7e6d2a.0","@material/mwc-line-ripple":"0.19.0-canary.9a7e6d2a.0","@material/mwc-list":"0.19.0-canary.9a7e6d2a.0","@material/mwc-menu":"0.19.0-canary.9a7e6d2a.0","@material/mwc-notched-outline":"0.19.0-canary.9a7e6d2a.0","@material/select":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OldTu+EKcTMZgyZZZSWmMRrNRAfcg+hZs5exemN62CCeMaLDAoOj6LEK9IPp6KgernEsAXSLrsXX+C09N3RHmQ==","shasum":"f03064b06954f696dbd68cbf4226ccab711e4647","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":46,"unpackedSize":935911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiufCRA9TVsSAnZWagAAz5wP/jnjyvcq+id98TPC0SCC\nCNpdzd+CKjAd8lSpchgTsCxXVvSHMz19UUE0dlptv8pPUkQBSJWEseapHZpW\nOKx3wNjm2WB9Jyw5hih3T1i+V5ns4vGkhmD0AU4R+BNABqDOb/jEH9yXLdhF\njC2N0lhhcaoOf9aBtlzhwH6nOoK7dldJiQe/EEFBwoNQqlnLJq5MbmziwMnV\nIhmFvLXfmu80pr32TtnWX4oy9JhDwGNRJmx39PlaiOOC3VtmOj15MpQjRBp5\nwHWOlNShBEKqMZ9PpOayEhX3bh492LRnOL9PWGfc4Ywpcy3nJYWL5BeTrj8H\nEACxFD62Uk54T33tMOmZboOzqJibDpv7/gkwSrMIKhDu1/xHFZoPQ+wzUThQ\nGoFnYim/hnV9yJPou+CGuPN0l/dZuam0/wMYKVCaexedceoteian44fN2gpt\ntmyfKBbQq2YsbpE/GNFhoryGXm5ZdoWyIg9wOuDrFDvQ71lNFIJn0+NWglFU\n0iX/SMsbdBEI7LKLd4llyhsLh91Wkidvs5lGdLZO6yV6Ih4PIMv01WKOmW5s\n77fitk52c9icnB4JwR+tD6YUXelsKLPhqUVf3Uvzuhipsk/pqJdb7pPg0RI/\nBdJ3GZB64V3cjWuaUWqpjKUND/i2IfaMk2GjDMWd5LzE6bvBnbRbQsXGaKjP\nLwEs\r\n=GLeS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEO9Z3Yn7h6J8AWXP/2k0fCOACGidhZcb+VxJR4ScHhaAiBWFDdDk55sjPhES9Jjl4oVecLNWyZTUFTKQJacFzb2cw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.9a7e6d2a.0_1596599199215_0.6661561576145918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-select","version":"0.19.0-canary.188f3f1c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/floating-label":"=8.0.0-canary.1b44b43c8.0","@material/line-ripple":"=8.0.0-canary.1b44b43c8.0","@material/list":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-floating-label":"0.19.0-canary.188f3f1c.0","@material/mwc-icon":"0.19.0-canary.188f3f1c.0","@material/mwc-line-ripple":"0.19.0-canary.188f3f1c.0","@material/mwc-list":"0.19.0-canary.188f3f1c.0","@material/mwc-menu":"0.19.0-canary.188f3f1c.0","@material/mwc-notched-outline":"0.19.0-canary.188f3f1c.0","@material/select":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Gz/Fk/mtlffK/yQ+BVrpFypl+iQ5N4GxMphWsG2JgIoH+UmJlaoMYdla+Vriy/RdWgCrP/ensJYRS/vzlxhW9A==","shasum":"4cbd16b64776e1b94824d31422ea11e309b3e68c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.188f3f1c.0.tgz","fileCount":46,"unpackedSize":935911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbxCRA9TVsSAnZWagAA3BoP/2NqMp8wGTWs3Fz5SCyR\nYR2GZeZfd7Ir/Ipx8wP6UXko8mf0NfOCFCrk6f0jZV6NhbqUCZgS4pCDw/mn\nnxa3pl12sihUZW6BJgrBc3+LLORg3mLKtKd19b2E0lxzxhsI0pXph0uP/Ut1\nmcEKkNzjsMQKtiGM9Q/yCM+OvPdEuazdFtymN+YkAghoy9V/OJhRBPxV7w/E\nl85F0kib7IQjkkfmNMia0S8RO3gAJ86ecILmF/6/x+vDg41UUHasgv4xWyGB\n3+2pQ5EQ1159kY+Yk9cIWcjsTCYHgH71fguhs+4rEE29XII5s5rOXh0F9hl6\nujIJyk/k2LDLpx9lq6QQKTEn7le/HfqBnS26DthsLgrOYcBVgWJ1uHHNPOe9\nGtja4PFCYwXyTaVcGXTwVUg4Ic/0CGH89LDmWKB3kd5LxSooKndbpbjADzyz\n2vVvuA/fB6cKRP8nDEd+gKcXPAPcBGf3pB1aLK3DqAZ1aMQNIDTGYMn5/AFG\n7Bzx/EbjqxgpbYKjm1BtP3+VyQLyUnZ++Hs2fGh8IIU3pjygJf6RUG+JPouS\nVgUNmdsEOOwa+h2wJgVVB2wuIYiY+yes/TaZ4krWkCigJrkIsKg4nFm2nwKj\nmBY+XtqcS4sCvNcLGxApsy+AePjJeIeu4v+G3//5AFNMXX54NB74uRqjzngL\nNIwM\r\n=PwIi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHVbARy2jrziLwnICyF4deSViv5EFkaOQj9KqkqeWEmAIhAIlr1BOKhg03IwOAzLF3QEl/rEQdRBHSHQUBLXikE/xs"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.188f3f1c.0_1596651249237_0.870635686235647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-select","version":"0.19.0-canary.b6106add.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/floating-label":"=8.0.0-canary.1b44b43c8.0","@material/line-ripple":"=8.0.0-canary.1b44b43c8.0","@material/list":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-floating-label":"0.19.0-canary.b6106add.0","@material/mwc-icon":"0.19.0-canary.b6106add.0","@material/mwc-line-ripple":"0.19.0-canary.b6106add.0","@material/mwc-list":"0.19.0-canary.b6106add.0","@material/mwc-menu":"0.19.0-canary.b6106add.0","@material/mwc-notched-outline":"0.19.0-canary.b6106add.0","@material/select":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/bpKguBxCf2TZ6U/HgqhUSL8SDUCW0JXNpWTgpi/XCVWkjTTpP5a87WqtZjdmg5tYRo9GWLCL4rwc4qXfheGVg==","shasum":"03823d582760cac64bc99d94424ed22872f1b739","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.b6106add.0.tgz","fileCount":46,"unpackedSize":935911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxt9CRA9TVsSAnZWagAAwQ8P/1rKNPCNN8aRnq8U6HfC\nEV+iKHtdnG2qgGbpingeGEaFQlfYS0ReazWCmM1I3mFh8MJHYjbNduiUB1DS\nF/E7W8W9dO43KU32VkKutwwgPsNCUsUIiqY0GZ4G6mMfbbhYur8ZO773HfM6\nzQtv/5J41vysnaOUFt4t5ZY530k72JXsR8v4zhE1NNV4v/hnOhvtTZb9DS7m\n6idQQ7OfrCrPUTIn3r4mQSm1ExBs21KbENxl8fY/sW9Xva6Yj62tNkDrd5rp\nrTwYzM5KTmx5tpDv+02G56ZXw5Zs+4KgYOZMDLGFuxEZTuBviNH5FYz2aTiP\nSRMUtvuw3HhOatznve6xsx7qQVlh0ZM2Ev+RYfHCscsTGzGLlmzHeyZOaOSP\nWWnuPT5WrsIhbiSWbHlJ3Jcjs8IK4aHYBWOySUhs8FgxL1j6vRxFKXVFEh/e\nrVqKPNJJE9OQOn1Q9ar5f6+tTgGhoYtORsu/HJ0+rYayuR24DzHQrjyCsZkz\nwfWB+YEEZCAmRDZNZz+ZcsSACWb19U0tqFQ8BV130yETtnZkCJVfZUphU6R5\nXOOolMsxcHvvhAhiLry+8WUnnIK4H1cfnMcjC9kUZvVhd2mkxNYKV2qNVpdw\ncpl62zIN8aJc/SXxlsvpHW9HPYI6X6ObQd2bzFf+WaNtnjE4Y8SGzZijeTBw\nBNWB\r\n=4Po5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1sIszJIGvJpNgoFGZiPPfZTkeX5MXw5pgnGRzFwuLmAiB1ra9TdNgudsTao+kXO57+aSpGOXujq94CxdFC1fbTBA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.b6106add.0_1596660605314_0.3945941804822366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-select","version":"0.19.0-canary.ebb4c667.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/floating-label":"=8.0.0-canary.1b44b43c8.0","@material/line-ripple":"=8.0.0-canary.1b44b43c8.0","@material/list":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-floating-label":"0.19.0-canary.ebb4c667.0","@material/mwc-icon":"0.19.0-canary.ebb4c667.0","@material/mwc-line-ripple":"0.19.0-canary.ebb4c667.0","@material/mwc-list":"0.19.0-canary.ebb4c667.0","@material/mwc-menu":"0.19.0-canary.ebb4c667.0","@material/mwc-notched-outline":"0.19.0-canary.ebb4c667.0","@material/select":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ogY6n5TOvrOck+ZOYpgKjcQh6UJeCyC9hFovHpRdtAi6zbca0G8o5CnExxjphq1ePSuveoz+8UvzO5kDfeaymQ==","shasum":"86691d9db9f0dbf2ca178d0bd6e1a4c691422527","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.ebb4c667.0.tgz","fileCount":46,"unpackedSize":935911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0yVCRA9TVsSAnZWagAAUmUP/1USXA4j3gBwsbwpYSDc\ndY9ksJZxW5uc99kWTLJlUhdgvcGfGIaMlT62sGt0AyXOmnFwmLp5g/dksXu0\noNYgk/0ZwAIWY4zjo6YlIlgZSi5JAGP4jUXaD891TnnM8B69C+0Z9DrMPapi\nn+XkIBuh/ONKzft91+JxFqFhMLOGxtY0oSlf5gm0RFGFnk8NazFzwwzUuTWl\nnKmxBTo1AaiP64hnL+r2iLGlo1Ne47+vU9P5Corki35AJ23IjnbMdYZpNiDu\nl3ZhvYyEN8s0i7ej7mlb2Lewwwd4aRhpO53dM/RJo7M0RA6PTkBs72DnelE8\nSO+iGThxgM3W807OC62h3tA79TKYkUc7QYLCnwSNtEkmJjkF33JfzxHfOtUJ\nFJQILQojZVsqr7R4EdonDT47mC+OoLSfVCsdNwpyCnT5oRv88OIult4lr2VX\nPO/BBQ5VyolwqYJv1CIzoIGd4saCXAOZsg6xVrnqTL6QTxqJUlAsvfSzUbeP\nExhfqIu9POiCbHyRpg4moArfAEYdbpuwh8g2ueUESJPSU4tFSxbk3AILIbnZ\n9FzLcEWcVdT1TkutGIx6dF7xwVgpJY2Gf9C5xusL/gp8buW034vG6vTG9H1S\nnz09NRH5x6QytACL1KLHcMH6VquNnM/DhNAjnarWMcLU7oEtuAjZrHbHblyg\nAQBL\r\n=npFf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2wgJx3OlH95XZAIbPuLmbcdElxY8FZrVZt18WA0eGiAiEAivH58um9ATJHmpBWJ9cll7fBTxKdB9awwxOV7gFiQsU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.ebb4c667.0_1596673172702_0.9437652277566457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-select","version":"0.19.0-canary.aa44289e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/floating-label":"=8.0.0-canary.1b44b43c8.0","@material/line-ripple":"=8.0.0-canary.1b44b43c8.0","@material/list":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-floating-label":"0.19.0-canary.aa44289e.0","@material/mwc-icon":"0.19.0-canary.aa44289e.0","@material/mwc-line-ripple":"0.19.0-canary.aa44289e.0","@material/mwc-list":"0.19.0-canary.aa44289e.0","@material/mwc-menu":"0.19.0-canary.aa44289e.0","@material/mwc-notched-outline":"0.19.0-canary.aa44289e.0","@material/select":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NvWzIKYtr4xePeDQXHgYWIUQRINSMgKdEk2mIjhpaE88EdN4JFzb+9zjmhmvaYPLljPtkspKNSZoJqnMxTswvw==","shasum":"0597d2d553ef05c8e7d7f46e9933f8c0a42d2072","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.aa44289e.0.tgz","fileCount":46,"unpackedSize":935911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEuzCRA9TVsSAnZWagAAm14P/3XRYxO32H/B6oHuf2pq\nHi+Q7R40RhKF2HobYWm0VEKuGDH2IiA/krLKLqtGVnQcQPFT1+5Nsr//7sZK\n8XphswjXwUqLI0JL0FCgMq/tAxWnO0lrAOaV90jqSQoW5QeJGvK8eE6TxRCY\nEwcAHOq6JlJ8KiaZEZ2U+zv4JB4cmZwdR69syvDQ2OtuizNGWHpItT+I7KoX\nfEfcp4PFj+2dwmGf/FKsjBLDC9mR0zkSeeRyDGnX3IWgEfovQPciPkvUsXi0\nWWGIvF3+8AvLdY28STIAuhipiEhfg5kajfDV5lIROeQzk0mKLwNLZ0WKI3LK\n4cMIWHWM+5rstpRYhssdTLIE9Z+TjyQx0+OMRo8OHQFmP4z45y8WFdeRQf8X\nJKbDdCXBPOfLDGL/w2CdBeDnIAfWlIMvbG1bwYfsIufYTFs3urykt8hhe5+4\nLp83eghLNopzTNSXKv0DxZp5367k6ijUAgs6WQBtQq0Logwz3JqjvjcLZCET\nTxBnkabFmmxgN4pw29PNkF0N/HmdHfQWazEdC5lJfHH8q33HVkxiApUAK1/z\ne+NU2zffLXbV960jXn+MQsG8zxh2FJMjlNDKYv8G8cf/BGOdyh8aWFGjNjR8\nuL2cW/f10F8mijo4VlxCEt/Jqa8yjez3bg77vSqMW28kkMTlGehDxQtb62ME\nl9yx\r\n=1ym3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBlb23q/YYxVzp+7sA4XRlWNAFSv4dv8NxJycyLyhwEAiBYcG2keYKWcM+f51MMbzoRrhAgz6wHTi47WS2coubelg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.aa44289e.0_1596738483215_0.8403044769021188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-select","version":"0.19.0-canary.e6b0816b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/floating-label":"=8.0.0-canary.96a640534.0","@material/line-ripple":"=8.0.0-canary.96a640534.0","@material/list":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-floating-label":"0.19.0-canary.e6b0816b.0","@material/mwc-icon":"0.19.0-canary.e6b0816b.0","@material/mwc-line-ripple":"0.19.0-canary.e6b0816b.0","@material/mwc-list":"0.19.0-canary.e6b0816b.0","@material/mwc-menu":"0.19.0-canary.e6b0816b.0","@material/mwc-notched-outline":"0.19.0-canary.e6b0816b.0","@material/select":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-S/96ZbcS5bFoVcpod9JUQ6riUUX/E1oUQzWuEgZbT0MlfUqpnLX/rUHkNRv3uurjStZHbfhgW8QD5GCp4cZ/7w==","shasum":"48ea5c0267f35d55db52665ae8265a0ae8f57ff9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.e6b0816b.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaEPCRA9TVsSAnZWagAAUsMP/1FUISccMqpjJY/mQhf8\n5EUihkUxFj8eAEhlnF2qVUo9uxnMJJYCZTk8/3we/46RdpyV0pTnNW8ac/d9\nxhQpG1si7Maq9joTiDQCTMrfGF1LtkBnbv7p4eyw7l6qFOoRNA0MCWFRkdQr\n6lPp69x+Whzd3Fe2XnNBojuR/PZOl/7Vr5tRKRZzmw9tqTX1R1l/1SYN0kud\nEvGffZt/RwhmsdkB6ItJaG9jB+pO8CbYqzFMJbT6WoVtpY+Ozqr+pW+CSRw9\n07hNkapqOJJ9D4O7mHZoLixatNXxBWdXMOndqudnmUU1oc8ZJTBMuK9Sg5PY\nAaIiHdZp1NcsYHM78HVB8IDyR5HA+a/vjwhwYfAkPUAmIICvBRju8NUO5WO+\nthERKpVl6bVkBvRZxNAXSeZEdROdQ4YYml6QnpruFYHui53XXrG5+me/e9UT\nRxy+s/rGQ8ASdTZIeOBmBEYrii5BOYC5oNhUsViWcIFWU97hmorS5ru5C/Ft\nkiHEHtK1nHxjTJZz/gVoByY6y2dAtFAlgw69l97lF20kixuDPgGYK/VfLc8F\niAVy0BcWhw64fEPhEy6iKxvudo1GCDPTjtJqtpOdRPZ89G/tViErCc797wzC\nf9TS4038YJmLTFvq1kYodQQD+A/bwKstZZf0h+rZ6b/oYutKwoq7iuaFkfmX\nNfsK\r\n=nzVJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCC0JxTy7aNH9wX1IHwMaQuQhuigH1WrXfFYFJtfkiW9QIhALzwHHjabXCHPJ8CJoeKkx6MMVUeS7B/Ji8mb9ghcC7o"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.e6b0816b.0_1596825871036_0.46893801902563603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-select","version":"0.19.0-canary.96d15938.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/floating-label":"=8.0.0-canary.96a640534.0","@material/line-ripple":"=8.0.0-canary.96a640534.0","@material/list":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-floating-label":"0.19.0-canary.96d15938.0","@material/mwc-icon":"0.19.0-canary.96d15938.0","@material/mwc-line-ripple":"0.19.0-canary.96d15938.0","@material/mwc-list":"0.19.0-canary.96d15938.0","@material/mwc-menu":"0.19.0-canary.96d15938.0","@material/mwc-notched-outline":"0.19.0-canary.96d15938.0","@material/select":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JmW7VmN+RbX+6PxBJ0xKTlnTyoReT6nV8ukCeUw1dIYfmdRduc8/wGq5lU4A5NSWMuOsPHhFvlb0rmc49loOPg==","shasum":"d613394d70b8ca715f2848f8e9a3e9f0008e4232","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.96d15938.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmxCRA9TVsSAnZWagAA5o0P/j9PAdgw+XUiHvqnGYHk\nfyQqZ8uaLxJAOTjwGNYkJaCrhXFYO4MyIjr7DlQTla6frv6L3j3gT3mI+FJP\n1C18WW09XVWbqpIkM9UQ+5cDcoY6z5udghM05SP8N8TN1HaWp0/wMXdz55CX\nZtdAJ375CpyKkYJspnWrIFMTz4EmBjyodRYm8apM+rICfcWAu4y9fRKE5tJi\nu2m6GS7s5IzosLkal+iCI/EISmCVYQ5sdo07Ad8GCQalJdYf1GN7fccaqqnb\nNPpZB8BZ8bzJ7xamegHupZBPtvr3v6h59zd2BfzFFi9DJQT3YOldx3XgugPg\ngIlh+Oz/JDtAdV4VeOwF8GdxlKkBoGPliiA92CwNbjXTYopvVPSAP9YotY3y\nVttYRFAy2o0TUqrkDJFV8yIsPJbOPF2VChAwpHGyzplCyyC8ZQTGJC8Qkykr\nqGIOvkFmxCDjnWDyaOxtW8jXjXnOj9cdWJDyUGg60/ne7rI50oM2YfkDh3Q+\nIM8WDjFFDpO0ef87xKtlG/OsLf9YR0d6/aF2fVnr+bT2WL6pZ8kin8dOxkJC\nuKfOwTTbx9FARQpgw+TSl6lxiKpjbIGIImDlkDRzEPXepI4tmfnCxDCn1vvJ\nHTtJR0iTvr/gbavflVLuYxv0wtmdd4MDuzhIlTO0pG7EmU/38u5osTKQ4GEF\nJbYQ\r\n=d5PV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF28LNaP+F2AwSr0MImuPX36sl+1xwWOXBq0h7CFoXl4AiAVCaFIILfquqgMQrWJtAowzGvESlu6Huv57F7BY+f8YA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.96d15938.0_1596832176742_0.7670114063767521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-select","version":"0.19.0-canary.9d991c8c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/floating-label":"=8.0.0-canary.96a640534.0","@material/line-ripple":"=8.0.0-canary.96a640534.0","@material/list":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-floating-label":"0.19.0-canary.9d991c8c.0","@material/mwc-icon":"0.19.0-canary.9d991c8c.0","@material/mwc-line-ripple":"0.19.0-canary.9d991c8c.0","@material/mwc-list":"0.19.0-canary.9d991c8c.0","@material/mwc-menu":"0.19.0-canary.9d991c8c.0","@material/mwc-notched-outline":"0.19.0-canary.9d991c8c.0","@material/select":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1rv9mji+ml3Ej7HmVMEk7YRcUtw2x2i7gSihtM2YPeqPBFLKoUNn4MFeGn2E72I4yJvF5cWAPW8+/7abOOEbpg==","shasum":"24dd324b998bf230d00e4553a53d972e16eba1a2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.9d991c8c.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdEDCRA9TVsSAnZWagAAYMoP/2cV09NwMXQjm3uMOYv4\nwN1VQAq8NGEtVMIo5aSoLbA0P9h+LWbQX7HwdPlkUaNOmWavYS/IS79bPZPu\nPjeonARtS2lnia8vB34VBWNmMzjtR39hNoJW3dLOVqOte+8Dw2CInOgnNsOd\nXqntZ9TRZawaYv8kUFTbLDmmO4nW5AjVVtoaDRhc4TEFPNtT0hV5aQfzWtL+\nK3IDkHU/4cD3+OrXZmroVya6THuI23Tf11ootJ5Z8KDWFuuDb//SmRd4dIGW\ncwos1DNxsSVQWruLqx5Wx+jiaj3hJH/vVc5y/wb96GMu8D7VRgB20CZBXm7v\nROUT7I+lm6o4g3Ty9M5qkknZlRyylAtSKUV2HLcCh+GUL9FXHCW1yDP86E/o\nF353JedntIoOh54x9CBcnsgmdNuOKWZNlEFZHpNlAJ59HwielSzg6nCh/uox\n0zsV56yoga473heKsjucJ1zRosYZ3wtg9LGmB+GOkewqwQm8UIitf+b9m73C\nOfDtRD5eofq4E+QTCQSLqL238BIRv/fyiBHdCP4I0GZK18L33BMeOT1lr/Wo\nYgv5xiNG7vw9vy61NgobvzbP7Et9x9fUPjJzNIBkI18NJkQYnw9dFXHe0Y03\nT8vIAkLCCAfZUj4JCf5N3zbsmsSbkqbF4/jwTSjqo3I9RuDTmaA/88LfEFW8\noD73\r\n=OVpd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDDdveP7biaM14UyJNkwyDLVIlvr78XQv/GJtd5iu0x5AiEA17t41L4Mje33NRftdpmaH480uPW+YYtJSsyfSUKVOiM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.9d991c8c.0_1596838146734_0.29639091536468687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-select","version":"0.19.0-canary.13bfbd72.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/floating-label":"=8.0.0-canary.96a640534.0","@material/line-ripple":"=8.0.0-canary.96a640534.0","@material/list":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-floating-label":"0.19.0-canary.13bfbd72.0","@material/mwc-icon":"0.19.0-canary.13bfbd72.0","@material/mwc-line-ripple":"0.19.0-canary.13bfbd72.0","@material/mwc-list":"0.19.0-canary.13bfbd72.0","@material/mwc-menu":"0.19.0-canary.13bfbd72.0","@material/mwc-notched-outline":"0.19.0-canary.13bfbd72.0","@material/select":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0b8p5bVQbhxP7oWIU21yAaSm3OSQZaA7m8fWNR0uLOUFZVs2sNn6I2mDxwgjfFpYjZIVD27ODXoF5hmlven1nw==","shasum":"ba617e03c282f30dbfacd9280f5292fdd8af67f8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.13bfbd72.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ/DCRA9TVsSAnZWagAArMkP/29Ehktvho+qDw5qQYgL\nq6Zi89t4Tj9HjF+ObhNCnCSHh5bw8abLKx0mo+r/Ol+eQ+o0cq0HkxHj0a/n\nuGknUjV2o2L6hpodwFfb9uN7TCLOYq8onbA9ABJuH8Z71InL54WJZcJBrfnL\n9vZpRTNNL1VERJ8OiD3U1bapqlpJJsoAg5EdeRKy1gtbW+YatXSy1f0dh2+X\nzMmWJ6GeuP0G4pypa0AW08kFXjFTlgQ7pkHkB/M1wZyTF40uSx5HcN0O9lgG\n4Meacknr01goLVA+7v+AgLO5ClmV/4g+DjxKArQgIuishcelE7lMDfawvI6J\nE5zP5neVkuXqB441UcWFIk4iGYaThZAwVm6uC/zE+xYTF6uJ0vm372Xbsyjp\n2ZHJS8Upoq2ZZMT9OOnGrBp41FN5i/o8tc5AN9LDM0mN1RutIHN+RKCqzPIR\n5o4Hc5nppszhOznZTsOi3uJ9f46CuA3ylYxeiNMdomrSGBPTG0TdHzq0PzOs\nQQIHjvng+GtwWTrA18M/prv9MguEXVZypxNO0TVn6UYs7ZZMfds99n63MWve\nI2ZU6v6vRZZWju116KTkF6OvbPDCOmozn0RRaNr639Pt9ea8FuZJ3KoZ8k4K\nIftsd78HCAS6qO9mafKkFKRCH4GUtLdwmRDAVg0Om4lHbiPP20KjHK0rj3ie\nACnW\r\n=zJak\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEq/Q04b88rxxSJK2ZOa4Lx44VminB6wYlRRa29XUHYSAiB7efrTzy+nv3kEhN9Pl7oiZI3xyZP0CRAXEJaFEIQadA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.13bfbd72.0_1597087683128_0.6586048037166963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-select","version":"0.19.0-canary.30b1b258.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/floating-label":"=8.0.0-canary.96a640534.0","@material/line-ripple":"=8.0.0-canary.96a640534.0","@material/list":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-floating-label":"0.19.0-canary.30b1b258.0","@material/mwc-icon":"0.19.0-canary.30b1b258.0","@material/mwc-line-ripple":"0.19.0-canary.30b1b258.0","@material/mwc-list":"0.19.0-canary.30b1b258.0","@material/mwc-menu":"0.19.0-canary.30b1b258.0","@material/mwc-notched-outline":"0.19.0-canary.30b1b258.0","@material/select":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Pef/rWQqOBCzLV/DxQx1i6KE3qj/QsGcPa+frTaC+a6ExsAEeHNMr+Yp/grQtGcSzngc2fyBfJ/UVT07BEgDuQ==","shasum":"74e95ce15acc558d90613c836c0e3c220a1d1330","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.30b1b258.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMakMCRA9TVsSAnZWagAAKVoP/ipkHDAJXDOe1AA+gh5c\nzHqqFpNQ0L0SViNog89tZa9O3m3ZhdsRMPCzfWU9CdvAGkkK33y499vp4gp3\np+iiql4bUBa/40/6JqHpavhkrgKCX4ejKxK7BqT6aBO5drKucbc1+319XIwf\nDw+cKEzM7D+GOz9lOzarmtxJ1eo6JYUKsBjTR5PsmSgQ2IcF8AuPjn7+vJE5\n0zrgq11smVoNz6EAd40lcY02ea+U+p3M47Q6QXe5EPDeqSAr2uqdZUMWgjRD\n547HaBn0pGr1pAkmPTCLFIDwtKtaZF8+TJgSS+tvlW3xixqtl33VxioEwJlG\n3kqdFeipa1e3/oo50hfoFztvkm89jCM4mRC6b5RbnpcKTVBhVWcbwdIGSxrL\nq3wTl1zTO3SWB02uqxSvZyoNLhs407bPhUlqK1ApIhUpjA/omGTwVgH7gxYU\nEsqGXvNdyr5BSdr+LdJeYHyUt2tDHpFBN7EvYvrcsOUMs2x3PQgXDVY0sLu6\nQRFot4ObSyeeNZeYCGA9JVBwK3W1auLl14i3+VHuZ1v124+BT/Z0jIa8eeGV\nGPobKbsFc+/ui8RUf/QvZz4ie+Il0sgAqMfteGiRnxyjag9sje7/sSavYrd8\nYZl5Sv0rGEDA8fqDWMB2hM9lYN9Dt9rhtZKENe3iGg8tMZhgFEGObigfjiMb\nFWPe\r\n=J8PP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6AX34hqq5f6X1JGgeBCPF0bKMGyoX82aK6yXHJnxKFwIgdl4isQTxI9HeDvtwF5ol7YPy6aIqeqaJ2e/qUXT22tw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.30b1b258.0_1597090059554_0.1449290220422177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-select","version":"0.19.0-canary.1583e263.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/floating-label":"=8.0.0-canary.85a5272df.0","@material/line-ripple":"=8.0.0-canary.85a5272df.0","@material/list":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-floating-label":"0.19.0-canary.1583e263.0","@material/mwc-icon":"0.19.0-canary.1583e263.0","@material/mwc-line-ripple":"0.19.0-canary.1583e263.0","@material/mwc-list":"0.19.0-canary.1583e263.0","@material/mwc-menu":"0.19.0-canary.1583e263.0","@material/mwc-notched-outline":"0.19.0-canary.1583e263.0","@material/select":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gqfMAAJVgGUj0zddj6gaXRZwLwXqeLX0xlv2WRPtv4umA1mLB3MgRY+cfdVxlWDkVGw/OJJ/ex9At2S3aCmJYw==","shasum":"e68f2da448cd8af46d0c41c6df9dfd41f872f659","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.1583e263.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyWhCRA9TVsSAnZWagAA4o8P/2y9uQxSnyVl58fBYpq9\n8mPb61tJQa5FGenCei8Ou1aI6nDGCVSXzFru+3+uXwXCwHc2Vts3QzIAtasB\nCPyZexGY1+80rfcpcCVt1kBSVxSMosXZK5PUxyk9iwo68XifEk8weAKHgXwx\njPJFwTOjcvx9DP8W2+wAmYNQ5u1RYv/yvUP1nYe3yNWLLSGMszBJdf6jLtdf\nlHPlBLC9x82nBsjnyc3ah0zPouO9LoCTKyweff2Wao0de8iWgoGvQM2Ux5gR\nnfmnuY7yENFanUQZq98ImIVbMbqTlnFGxzfNLM/jpwbNqzKhZ4Af2wqIFXQa\nmhf9PHC4IViQCjnbMSijP8zHs/foK7oMmBU0Zr/h2r82zf0FrFTvgHYcwGFQ\nXxxfLDnXTroD5Ty0A1q4Wa0NvTSnnjc8SgU94KrdBd1fhDW60YJpX3VJler/\neSly2qK3F9HoqslLh9o9pBIbSIzF0O1UsU2T+UrFSVQSNjUeyjJiiihWHGIG\nSH2Ss0mWeYV1+Z3JNOznRvsMrZwV1JiVzOrtT6mlzIRHv8lroiHCj0XGc1VK\nxJVGhHnReBVvs2AO6socldeOa7gjCFlg9sOdrevruXTilp3rqHe79wgSkwOM\n5ORSRYM9HC5djRyBc+0v6y1p0xaKglxx0HNI7ap8jYgS+ia2j6iDFMkEecaP\nyAdc\r\n=/fhw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2uWXY518A3CPeL+kOxSvS8LivVbB5iuvyZJytA8kHFAiA3MOGrlKCzf4a7yxotrMsTiQl2r3C+k4NP8rqHTOw0Kw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.1583e263.0_1597187488497_0.4975281069331756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-select","version":"0.19.0-canary.fefb1a93.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/floating-label":"=8.0.0-canary.85a5272df.0","@material/line-ripple":"=8.0.0-canary.85a5272df.0","@material/list":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-floating-label":"0.19.0-canary.fefb1a93.0","@material/mwc-icon":"0.19.0-canary.fefb1a93.0","@material/mwc-line-ripple":"0.19.0-canary.fefb1a93.0","@material/mwc-list":"0.19.0-canary.fefb1a93.0","@material/mwc-menu":"0.19.0-canary.fefb1a93.0","@material/mwc-notched-outline":"0.19.0-canary.fefb1a93.0","@material/select":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NQTN+EA42WZOTBiV9zxtbqZr1jDWDjaITeva6MR3QysqAaFiwjmwT3Y6uA9BMJMKB2fwX8jEOU/atY5fwj1OxA==","shasum":"f9bbb540cf2b477c0c4c029db71354dfec372c4d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.fefb1a93.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzcQCRA9TVsSAnZWagAAEyUP/3oe4HohKx+k99sj1GF6\nvLCOklEul0GdG03F1qJHIIynsz/LKr/TzfoHBD8bZvmQ9sDi8ryRfb1SrvXD\nZgtSG5mWIgmL364zvXH727dbabCY4L7DvB0ywCoWwjGY9mkANqEixQ5IZsJh\nwpOORGz/by0lErCmrynON2RkH2UIkEy1To2RFZjoM5fPP3KwBrnoON2jjM5E\n7a6+87IChCLF/+J0s93r5o5wLE5KsJnxK5yjizwGVaX7/p7Wg3uZ6YcDEm+V\nxeW6+Fxy0Ze+kA1JNQnYsDpQOaZyEf/KuRD/sYMz+aeUGiAOqTHM7+/lrCwz\npNeIOU7vBzz5rpOaJKqjtT6JjRIKAyU3x5sH9U1YvfexPZZqrgD8kS9K9OVV\nELSicqQPLj6+9ZvF8NgyHKHhkPLBakjeXVfOob4vvmXZlhS45YmoNJW8vgg5\n0U/DivV5CYQTGCmDr1ANTXXIWZcD1uYOl19eLhloYBW+WrunU7VU40t1ovpL\nWV2kNzhf5P6oLX+mNAqP9K8ndbujlrC+i3NEtSDFmFXuBcPW+KLyTrny+uS6\nDgwpAWEXfe1Qs3nYglfdkqLwpyazUH9TjQz1YaFdAWwueHxqrOZ+79M009zz\nuJ22A3HI0WetjXXIzAaRSu5wVJu1n8oA1k3So/bJTsnh3I0d4fvxJTLwRZy/\nmqcQ\r\n=pHCk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICmg7sTshpEG+c7iG+YKtWQKVnjPgwQLoh0pp027m01dAiB5Hh8U9Rsu7NqBFaKwravtPCFoLMuDORFibKzGEYS7aA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.fefb1a93.0_1597191951730_0.26046275295370735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-select","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/floating-label":"=8.0.0-canary.85a5272df.0","@material/line-ripple":"=8.0.0-canary.85a5272df.0","@material/list":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-floating-label":"0.19.0-canary.1ac5b9d4.0","@material/mwc-icon":"0.19.0-canary.1ac5b9d4.0","@material/mwc-line-ripple":"0.19.0-canary.1ac5b9d4.0","@material/mwc-list":"0.19.0-canary.1ac5b9d4.0","@material/mwc-menu":"0.19.0-canary.1ac5b9d4.0","@material/mwc-notched-outline":"0.19.0-canary.1ac5b9d4.0","@material/select":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jrvUqFGyx8Lon4DIzL+qgB9VZqcKFr5Jr/wbz3qtOS2/d8BY8TbDrcyALWnCb0EMy2nvzUArjTRccfAR/4jsCg==","shasum":"0322a8d3d932d2ae89f22e4b12acbf1ff8291d03","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDS1CRA9TVsSAnZWagAAelcP/0pICyyY9/L7DCVHOdk1\n+tLxoJrAeQer3fBY7OaceEc6u34KtPWftiC+aXr4yJxYZQUNMuRCIpa+MbTT\nCyY90t/6pO+UPpR/IPm4CJs/NqRvmYxkSqHrdtZfR/pkdvJRwTbdWePTXGDb\nmhMStbIEAKocgT/2FYBNkB3igrEF8ZRR7qc2dGOIwVKZOXkT4X/px3xjqfqK\n9uOhKAH8JBd11fm333p8xpSeFlsv/0CxKjopQc1JLT3ISDpR1Rf3vFngmytS\nEE4l4q7YZ6UPoLM0fXfmu7W1XkvkJeCEvXhsUF+/SMSfJBOyqMANMzWhgDxs\nivhI12MJJNEMOsluPz2T+9dOJqGEW8AYkAHlB3NmMfJm48KSSMB/ucos9oHw\n2vlOMfM1EL4cg19jCthIxrBd55adjl4xbJQhbLjx8LCdalVkE+iy++0EAmj4\n+86uVr6lD4TzbjvAZinyDgmsK0cVw/HxM3H2Y5Qo1Ox7e6JKJ0c7WgvqA4ZT\noQmpHHOCY1wthBEjJooj/ncEq63u9p/dTVY/1pREFDXcvh4UXBAMcffuFdan\nnCck+pvm0KIv5e3pjOjVhGGvQx0vxg369FNaDcP1DLy0cUNAXs2ovhsJo/tE\nLMmfr/SUUvUnr447GyNPvaifxa0lcUK4KhzPvo/ejtQVuHefOcTpri/47HU/\n6eph\r\n=xmov\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTKZPodGgS4zCeAVsWUchSpBw1t/Y/YeIA+da2uiygtwIhANASXZ9DQk+Jv3oqJZh4ZYdBGEekrQvJI6NywXl3ND+i"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.1ac5b9d4.0_1597256885069_0.9276285969703908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-select","version":"0.19.0-canary.f17f5052.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/floating-label":"=8.0.0-canary.85a5272df.0","@material/line-ripple":"=8.0.0-canary.85a5272df.0","@material/list":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-floating-label":"0.19.0-canary.f17f5052.0","@material/mwc-icon":"0.19.0-canary.f17f5052.0","@material/mwc-line-ripple":"0.19.0-canary.f17f5052.0","@material/mwc-list":"0.19.0-canary.f17f5052.0","@material/mwc-menu":"0.19.0-canary.f17f5052.0","@material/mwc-notched-outline":"0.19.0-canary.f17f5052.0","@material/select":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tURw8NqGspb+uTJct6OqRTn6+PO5etH0907/XF1ZEF6IMKyFphYQ+GIQa0qYRPP/2Ai8QfRia/bCqkiyjym4Ew==","shasum":"9ba3aaecb77793da02155947d4391238dd869f2d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.f17f5052.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXUoCRA9TVsSAnZWagAAVhUP/3+RE4TRH1iPmm4KasDW\niKmOaXdLN9EIq+Z8Rjkc45iH6SDctK46hp5oVOs3fASersvhbo8sD+vIUswJ\nQA4bpRVT0+PFNe+8efsXzhSZ+Iq6WvNF1NInpN0KU02NvZZJFau1mzgngfBH\no+dXlSd3PipI0Qsf3S0W3plCY6B8tOvrgEhTiAQWX3iyAwnrFm8fQ9kC86Ap\n6ZbFkYKZJ9jfrvacG32CK7udjomlmWeVNVAHVmwVYY3qoEbTZMQs6T4IiJNn\nKAgaVjUA33+5AZ0X+Yve6m2ldoP66Gs4E1ydWWgorxr+8mQu1CwI2wzL27BS\nVgWm9f18USCb7zh8Fok+L1qK52UpEputITWXwMicDCjbR/joTLhknHnn4z9n\n8Aa3Pwch7mJXlWOuQmVi9+Kr4i3zJwKTB/zUz2E5QXF+6RSjT7OUqXIAOXX3\nsvk/Q3SCbeImuRbH/nT5v+Ptroyh6e+wNhxPjSyxBmdhyo+3jKkrLDXYGzd9\nSHnDUoXVr7bI6llclxtIOVeWmOiinhCm9uLrcXZ6u2XC+XsAV3DotGa/J45a\nRk0Gg3Q47estpElK1omJoF7bWItIhBTigaIZRmUrk4egOuJPlS5C9RzshtKw\nYmm6rD9Qj2YN/6vzeWzQ1T9og3/dKrwj70WC7GynFmzI5Sa3nTFV7hePcXD9\nwaND\r\n=GvWu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeWWif0NjO0rFElJUTHRvyvAIToRCdiXZxB0rRfBPxsAIhALOwpgaOHJEM0vkvTwmjir0wAwhYcVvH2IOkaz/SOLzS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.f17f5052.0_1597338913187_0.13065613491149075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-select","version":"0.19.0-canary.80b5d20d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a1dcfe97c.0","@material/floating-label":"=8.0.0-canary.a1dcfe97c.0","@material/line-ripple":"=8.0.0-canary.a1dcfe97c.0","@material/list":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-floating-label":"0.19.0-canary.80b5d20d.0","@material/mwc-icon":"0.19.0-canary.80b5d20d.0","@material/mwc-line-ripple":"0.19.0-canary.80b5d20d.0","@material/mwc-list":"0.19.0-canary.80b5d20d.0","@material/mwc-menu":"0.19.0-canary.80b5d20d.0","@material/mwc-notched-outline":"0.19.0-canary.80b5d20d.0","@material/select":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Q/ObfcTI5ySPHUCMUVG2o8jtFQIiBuDQwBYzkS4g2MkWzhAYiVTYR0dtkWQNDmuueGZztddrurhz40l4UblhHQ==","shasum":"c0fa50bbc5bfedbf7344e8067996a82b22f7e42d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.80b5d20d.0.tgz","fileCount":46,"unpackedSize":936296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYPYCRA9TVsSAnZWagAA4jgP/0SJNfSRq/GNr+zcd+GZ\n4D0dmI1nHeSszA8eMuwJFDvq7tcJ2VrtZafGriI+q8C8uSm2sdr431W6UwN4\nlZ5fl4APYHh7ZUEk4g9IuE0JnuZCw0L5gmtBWIdpjbSEJgdBxBsCjcn1hosd\ny0L36Vn+EIfu0mx0PFQYXCi0R8//hQ+xdd8cJzknfiJXzyCWmzKs0fMmeG3Y\nNe1FqhZ59NQMr+FN/4eHgc9kxXDXacW/Oa1uMqTfHgrM7BC4lRNSGk2Um25p\nGLSZze984YFKe5y6dh/ZXVVxW5qhtvDzv0+7Qs1Bk0QvGo80VSxh/3MFVPS5\nhgXkityrju5bADvIRTVbos6atxOtlDsBzYaPhzWiIiMlVFrFosqe2AcXU5fj\ni481BvhBDWFJgtSDAaoNrEXdiy6O8FbthaIK+7DYJF5VLDETozEm3PE8dYfU\nPuJgCOuiUqrefWUqnxjcAkFF2TWNX2klDukXDSpJmsamvKeYbZ/9nDEDQUpF\n68h2k/OErCPR7tcIYBAevCLdX8iaEUSi191HkKNgW7LppGh32ypigLtAG9N4\nviVZatcpLmzDUnfI2XfH4FEaY+KZsZWPCiI+jODA1DcGdmqyqJjNzWe6bWf/\n0eNLD48Gre1CtadQTyCqv7C8mn+aZm7PyEG+G6xTviVZNp2riFpItOEqnOp6\n3JiC\r\n=9fs0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX598VFfuiV5/mDhnQkz55cvmZE6ADOC33acjHxT4hrQIhAPBpmODnboZfuiKoSw7HZFWgeBeOuZSRPZm4SNOZfFjf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.80b5d20d.0_1597342680332_0.14988028622546334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-select","version":"0.19.0-canary.758635ed.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a1dcfe97c.0","@material/floating-label":"=8.0.0-canary.a1dcfe97c.0","@material/line-ripple":"=8.0.0-canary.a1dcfe97c.0","@material/list":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-floating-label":"0.19.0-canary.758635ed.0","@material/mwc-icon":"0.19.0-canary.758635ed.0","@material/mwc-line-ripple":"0.19.0-canary.758635ed.0","@material/mwc-list":"0.19.0-canary.758635ed.0","@material/mwc-menu":"0.19.0-canary.758635ed.0","@material/mwc-notched-outline":"0.19.0-canary.758635ed.0","@material/select":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iptRnxtgn+3ZLOKklXLv3vAdB3PrAEmhHDAz5Gg/ZDI5ELMpIIX5GLBFo/Np3DSRCQY+bhhEQ5oRFz8QvfJ4ig==","shasum":"4973f95c40078be8d5da71c4ddeb255e75405d57","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.758635ed.0.tgz","fileCount":46,"unpackedSize":936073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNscjCRA9TVsSAnZWagAAgGkQAIHQDb0epYdqqIS/GZkD\nGV/5uElvin0LmeOgtQxi7sKvCLPgkqgxZatqnpjo/1CzCtsMmhmIr5VphPSi\nK1XZuPPWMGnFSEgHSdkpj7HOaFxd28m2F27uFeJrp/LNezCNEEbItwrNj2uZ\nfbOZofcls+MQ5NOF34ncF/jXLBRn9tGpe31BYD0565ZRKSCXCpU+51CglM7k\nbUZLtXGwk1aVrEHvy8jeXTla4fP6Vpaw3UayF4O6p0y7dcRIHcgf1JJCYONn\n7bqsVVm1VTonybEVaoKMUZKODJLStPjq5E2MotKjIbXvARuAI4CTehyVJLgn\nx3FdYIIwkFSj2xSfj98S4SFKA9Sanpq220Dny2QUUsh8MvcOgf1JiWMk6nVq\npX4lSIkwCV7SGUbXGEp/UG58ZGtsWQH83op9cMfqDqXFb9MudMxYnmJUO4XQ\nfRFSr6fxX1Wlb9P6wttTq+UdFrKpToxeXAiG+JwoMg8/Z1iyP2P9VtbgAlsR\n900gCYPjmSR3ZOn3Qk+2tCebYXuWDFzQLHVBeYhk6Rw3656TuWZSs78SxX/q\nanb4aXDwWx++eEvxa3NleReVWvq2Wqzmag8ogcPjGyyVEKpMNEdQTHVmZ5o8\nAtpBKd+3v6nzXumokLwMnwudDE4GKc2d5mCBbLI+k7vgvsQP9wO4gUboPw3S\nTWAq\r\n=VHuz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJ3RWchL2ZXqYqa77I1yXeF4F9af9Hx37+Y2qh8LTCNAiB3NMNozKr2a1i+jUUQPQsafvEL1QTnRQOuz27vacqWbQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.758635ed.0_1597425443218_0.11927646705622807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-select","version":"0.19.0-canary.18d6b808.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.150f427a0.0","@material/floating-label":"=8.0.0-canary.150f427a0.0","@material/line-ripple":"=8.0.0-canary.150f427a0.0","@material/list":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-floating-label":"0.19.0-canary.18d6b808.0","@material/mwc-icon":"0.19.0-canary.18d6b808.0","@material/mwc-line-ripple":"0.19.0-canary.18d6b808.0","@material/mwc-list":"0.19.0-canary.18d6b808.0","@material/mwc-menu":"0.19.0-canary.18d6b808.0","@material/mwc-notched-outline":"0.19.0-canary.18d6b808.0","@material/select":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tZabrCMLqrpj3Fm40oh/Et9yjVWZk+rgTB6We2D0SYpI3eGJSfFMuLC0Mtuw/djWgGYuopRY5zmZUSPJeDhpvQ==","shasum":"4c40cd3c18bc0c8712f07984dffeb1777e35ad52","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.18d6b808.0.tgz","fileCount":46,"unpackedSize":936073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxl7CRA9TVsSAnZWagAAPPUP/Rr4C0AJgva/srj/iUPe\nl7FH+zhwv5Vv8skH+o+CQRV2j+0XHb1mrx73D3mFxdZeqYrKphrEZledqqTq\nDOMiZSWfChD2yGq51q8kZrI9kuat3ciItj45en6V9lG1yuU2of3l6KJVvz2H\nbuaTcj8rMSm1T+7/1uYIY2jZifdnjSs9XPkvZ2TdaLofU0HWwX3RH41lPtF4\nRtA2h2hqEUwoHd4RYSLXeSMbuxHpZrQ/91mYboxOtBRY6JAl9iJEVE/0t22i\nQhmTrhE/c1T/Sjs5z4U7opMPwAvJrNC/kBLDxVt9axrXj3MmnyiIQ/CtGP2P\nFSHj8oq993/JP/sGo/7a67Eu2fxIer2VV2VXAJxYRIy8E/YsIAVGN2lRcpj5\n5KKostPD+nQTmeBl7sbG4IyN4ZrT6FFyChmeSfRu9Bq4k7N+ggB9T9OQvV8A\nLbO85wbcA83n1a1pKinbFL1hPf0p/IcxWwZdaSDn+inWU48V9rJfNlsHTUdK\nupTCtHav+FP/RR/b0veypFyFLG982UA26wP2iJXjT6Vt/2IFxbgWFXK1v2af\nANIpVfgarDaA1AeSPmbiZ/8A+X9TEtDb/7qy/2TG2Ot9LtexlZfarv9N7hSE\npvwp08PFec4cx2hBXdKICNpvGKVUSsaWGtKuMPU+4KBEHG8ddJIHflL588Ca\nw1fH\r\n=Mqa7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFeHLWnpGAdIS5KS7+fNhD8znkmKCa0zN1vGiI64Lq4tAiANxuXGjDWPISBOCPpXAwLwERGsbb5kBLuygq2Liq36zQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.18d6b808.0_1597446522719_0.9113396621562608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-select","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.150f427a0.0","@material/floating-label":"=8.0.0-canary.150f427a0.0","@material/line-ripple":"=8.0.0-canary.150f427a0.0","@material/list":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-floating-label":"0.19.0-canary.5f8ffbd1.0","@material/mwc-icon":"0.19.0-canary.5f8ffbd1.0","@material/mwc-line-ripple":"0.19.0-canary.5f8ffbd1.0","@material/mwc-list":"0.19.0-canary.5f8ffbd1.0","@material/mwc-menu":"0.19.0-canary.5f8ffbd1.0","@material/mwc-notched-outline":"0.19.0-canary.5f8ffbd1.0","@material/select":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YDLI8mVqKv8i5+Nlpk1YP3+ml0SllNeJTjq0KQuLLa+aO/c5dQBrJsyAK6+YAahcTQtiLP2hhQO/qzpSSb8WFw==","shasum":"0ed353ff3bc0e8b1edfea374a9a8c000755cc5fc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":46,"unpackedSize":936073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGzCRA9TVsSAnZWagAAgcMP/3FIKfpNoDPxTnyc4sjH\nMg4plBah2WkrpSmn9BoaCxCMquqpVMn+wimCFD1Zu/+ZlTWjUfn8kcmsyv+Z\nlq9CbwkteIUFog0woobB3t5vxSswHiAkDEnrCvrAzY+UE7vGYD5hMFV8h0Yi\nhNOKekxm5VABfExxiZkQIZTJoneR51RMZCfb+VLS9IiA24M+gkPe1k18jtDi\nN9bpBCrAB2cX+JuONKvGtOPmPGGhzHSz2VQbVCO9CtDfAtblnetjxHT00wBI\ndld0G1LU19ToRgp5q5uVOTbAXmGXd/P9HTjk3cWVBvZbwG/dIk8Dvpq75Vyb\n+RzMn23wAAwmFTA/Pbe6svTwvHfpgJVc6n8MHKLLK7gVCxrIwTp0nlHwwhxl\nhdX2ARJGmDy/2vGO6KlLt6zUkP/T+oA6JfiYrmD7Uu3TlqkaRy8/TTKKPv9k\n+XZuRKBpW//y/60oAToTnHMvOdLUjnNYe8ISXXfkEwAI05T3jQtcMu7JZh5a\n+Y8/eM8ll7tOOoBzRXEyrghUj7OR0eY/h0MxFHc+Y8nGolZfqV8lw+zhzGoy\nGLsnP6iw3hr5wpHjKTwBnWcR3wHypBXUncmwJaqp3tG8xch/E1GEqTwCAGCU\nKoQFJQCuHTia7BbFpC8LRLmR+67I5WIZHPOD3AVDx52VIBcyM0ZxDOnvRlVh\nXBQv\r\n=H5Li\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESReiXTeYCn4RJJCNFaUYN89LnOMIZIlH6mwFC7JhFnAiEA8isJW1DzMQp9XHs+S8udP0gKEpeouqOAvhcoO6Z6iQI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.5f8ffbd1.0_1597702578859_0.9400523334487363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-select","version":"0.19.0-canary.8604d59e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.150f427a0.0","@material/floating-label":"=8.0.0-canary.150f427a0.0","@material/line-ripple":"=8.0.0-canary.150f427a0.0","@material/list":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-floating-label":"0.19.0-canary.8604d59e.0","@material/mwc-icon":"0.19.0-canary.8604d59e.0","@material/mwc-line-ripple":"0.19.0-canary.8604d59e.0","@material/mwc-list":"0.19.0-canary.8604d59e.0","@material/mwc-menu":"0.19.0-canary.8604d59e.0","@material/mwc-notched-outline":"0.19.0-canary.8604d59e.0","@material/select":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/IAXJ4W4zs1g0f/tWkGHZZdIpBDJvP3MGLllScpBUudhjzTY9p/RI0MwwsRjOA1gDs9aflJRu5A/cTBmiJidTw==","shasum":"02f7d539f0cfbadc892824bbe30223af53688ac1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.8604d59e.0.tgz","fileCount":46,"unpackedSize":937749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyjdCRA9TVsSAnZWagAA+T8QAIE8xEhteWbZNwEAdx/h\nEU8bpjncIpnrx3GFfcPRsiBwKzL593c5TTaSoZ/GRG8yXalthHUFAwwGqlBN\nlHtW3sIyvQhmZWjZFgaNl27vXTLn0yYj+1gyR8CGdnCi0U9HN/zJeMYzk+QP\nPF9YO8WeOxE40xdEz8yMjBnaLsz66c8SZafYUC7QhWx907PyYYcZl3U1gYHc\nniP4DO39NTej4dUCXW/1cwsvo7C4zX5Hiuf5i+Sidgnz/dnOf70sS960mfvM\nDxIhXcARm5mdiqS+mZYd1QXWSPlINLpQEFWJkDgoApdwpDqcP6Pbj7+wk9DG\niUXbcNuhz04mRdO3JySmMwhW8V8mczRVj1LvvUvT5L5nyQAY/uTGHGuT+2fk\nqwmC2ThQrAYjtaZHjFnfI4hd0cq/QeCPqYXgkpELn+Lsv7f8p9cxzMhyj8Bd\nHrepHqr6A1YbecWfJQt1egU5nT1v6PDX2eJjVksBUm55SHAOyDdvBJj0x9Ah\nDvXV2wxSEJRvbXOSAR/MZGG0+Md/a9OirZ2HC3qrtR5t1v34aFjDn/+K36er\n8vafoqS6DnnfsUy7jnXQlbw8flvVc7gIWMs4SZSzmUJO0Kf4RJQOidCFwE6p\nCIH4ZQ5OH7cbB+Wo62AgqBmNQY7lOUvZ1RrIFRJLBH3HW82l1x74odglSsy2\n+nYk\r\n=P+YB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQpm5/MSWdvAZ17Og+BFiuIEGzKknNyp89H/E78WEtgAiEAv/5dUBNlANb0Go1TeGLtkQN9fUiMq5gK6utdhVcG0UY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.8604d59e.0_1597712604509_0.8577891720120279"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-select","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.defa599a8.0","@material/floating-label":"=8.0.0-canary.defa599a8.0","@material/line-ripple":"=8.0.0-canary.defa599a8.0","@material/list":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-floating-label":"0.19.0-canary.1d7d5e34.0","@material/mwc-icon":"0.19.0-canary.1d7d5e34.0","@material/mwc-line-ripple":"0.19.0-canary.1d7d5e34.0","@material/mwc-list":"0.19.0-canary.1d7d5e34.0","@material/mwc-menu":"0.19.0-canary.1d7d5e34.0","@material/mwc-notched-outline":"0.19.0-canary.1d7d5e34.0","@material/select":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-J6iqcFbG5nzH17zuwPZPLCt1reoSdT7YDyGIGQBquuDAJob/bM6GSex14XUh0DoHXFs8S5gESVn82EdVTHfwug==","shasum":"e5d23a067351b9586c5c112c68b4c9f2d39d35eb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.1d7d5e34.0.tgz","fileCount":46,"unpackedSize":937749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOypTCRA9TVsSAnZWagAANVYQAKLby/3RRSi9x+kDjurW\nAl0g/IEbgby5Jks2d5hlehsZhK8G2wR8VxdEy56pkS+8ZtD4qPfK/Ct+LF7S\nE7NeUnxuC7FYSlI0HAKg7b/CseHRBntPQJMWDkWCjny3GTXmw61mBxUajhXj\nJkuLFFnnekE1uGPlVYxt2JvJoaDRkKRgjMugu1i4ZQmxamoUKyYQ1Mq3wRuK\n4mW7DCo7T+z2T0AeM67yqC4scL8wZSA+gr+YTwFYwX0Z67H3WV1PHP71+9tI\nJRPqLz/T2PXpAo/u6JtfBzqFribcEfWe3zzMGStqNybxK1ZkvU25CgnKH/ee\n6qe+9TcyQ22K6mDd21+FGdiOsJSNmFv4IAhD2auOADDwwzaxKCxkX0nXTlcU\nBfvdVbEj8zBIB+2GKObPpNH3eax2wCCNj5SOKS66JCzDZop+WtM8P1y2cW/q\n4huaP0b3POaYqgucc0Zc+fLmk1iZdiXTp+/p1jY8DPp/nRSd33DnNWDTLJDc\nhrLyzkmUcvNljUJQtjDVQm1qIW3+FgzkQezpH9JA3Kxa33iILwvwWtDN/3za\nnYyiqJck01044O33VhQ2803CedMSQZiH1zflzKOb2ChAs9+XT28WAyV5BK9u\nz+n39VD2vGcN3mQasd1R8czXejTpY1rz09gZrwXFzBZc3ObSo0btRg5HebN8\nW1fd\r\n=/r+W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGGZ02w6ruiSFR+laAH+TFUH/NaCpllMt016grMTZcfwIhAMnbyXpVeT11eHOJu8VSobpUdwA6/mesqAeJbA++eea9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.1d7d5e34.0_1597712978876_0.8083322789729974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-select","version":"0.19.0-canary.9cc95c07.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.defa599a8.0","@material/floating-label":"=8.0.0-canary.defa599a8.0","@material/line-ripple":"=8.0.0-canary.defa599a8.0","@material/list":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-floating-label":"0.19.0-canary.9cc95c07.0","@material/mwc-icon":"0.19.0-canary.9cc95c07.0","@material/mwc-line-ripple":"0.19.0-canary.9cc95c07.0","@material/mwc-list":"0.19.0-canary.9cc95c07.0","@material/mwc-menu":"0.19.0-canary.9cc95c07.0","@material/mwc-notched-outline":"0.19.0-canary.9cc95c07.0","@material/select":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection. |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XITZ5GnE/DaR8yKzZyw/O3JxMjfI8ux6jVlZNhCPGln8uRuTm0SkfnvVrMU9Yr1zKdfCyyEzyTwk+EqXG+epmQ==","shasum":"94377aebc56f67d9351ccc8419785fdf9c91b423","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.9cc95c07.0.tgz","fileCount":46,"unpackedSize":937749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOywdCRA9TVsSAnZWagAAUBoQAJbLcra8avaFmTVEBzCg\nj0sA3woE2ykiMXxp5SfdQ2Q8pWbtoxQfMwW6rswEw4Gf86rhLbGmiJb8GDoV\nnKqLZxCryWUZ0g4uYJnk+ATII/ENsKfgT6yws6HYAkbF2krhAgnfg10tPAr5\n0hruhufKs6weXMlNN8jKQvAnW4JSa0GQDTcVRJT6tcKf0ynCTBoPnveA3eNs\n70STQJWtXSb7Lt02E/OOPO441/IXWxdP2AYzKkqxixvEjv1r9G03Jbi/Pp42\nlna3TMZEixvS5ki1VHkH+lf8Lca+aGkJJmwLW7GSZVuPhI4pbkq6SRjqcswJ\nyc1A++mJcalI1LlvDSb1blVHeEQSh6QuCYENiXWHA2IVTsQJFBKBOo7iaf3f\n3ewWSJ633NeYL0S9eGHLAZqm0oEuH17a1t96Khl3KGr1okfxdX+vHaDfPh7L\nOvkHt9Uaz3GsaDt01Cmputzw9lCRIAP9ZuUbmDOlB8pBK3s1Gx8yeUIsEBxx\n/8e0yV5YNmEfuObcVDX8eUhwcn5Sff5c3WpZSgnuBxPE5PNG2BzBzJITtrrL\nDqe88bqXCByUUVWnh/MTfgSWKP/4mapDqHRGNL+VWTiU3DlBAd+EMgNEUEsM\nbOwI1vaH63J/YkmRJGUPSExX4LfCa6otPaP1hgLdT+QHvUID3ki/KgzqW3TR\nt7Zg\r\n=Ds8N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzsIPFSAjEvrx8zjTVzrVo6lILRgxuMhrmwO+DAKeaTgIgHtz6rjCYIwKzdGhUqXGqpl/18T6WJcgebHaIlzFNy1w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.9cc95c07.0_1597713437482_0.12714585728129646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-select","version":"0.19.0-canary.9f65ced3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.defa599a8.0","@material/floating-label":"=8.0.0-canary.defa599a8.0","@material/line-ripple":"=8.0.0-canary.defa599a8.0","@material/list":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-floating-label":"0.19.0-canary.9f65ced3.0","@material/mwc-icon":"0.19.0-canary.9f65ced3.0","@material/mwc-line-ripple":"0.19.0-canary.9f65ced3.0","@material/mwc-list":"0.19.0-canary.9f65ced3.0","@material/mwc-menu":"0.19.0-canary.9f65ced3.0","@material/mwc-notched-outline":"0.19.0-canary.9f65ced3.0","@material/select":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N6h64aOiV8ZUKMrgXAU978sJEHnJqXJGGsrGp7jGZIBdwdUOHhTG5cu1wNJkMf/cLgkkhMuRgKA7SQNzyleCmw==","shasum":"462a71c1b03e012ada47cde5ffafbe8be350bbdb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.9f65ced3.0.tgz","fileCount":46,"unpackedSize":937611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDc9CRA9TVsSAnZWagAA1MsQAKBEtbQ2XL9vxckpbmyJ\ncT6jEINCVr1TBH9f828dDHFvccsK7dgXg6Uhp40RX8f/WwD+KWGXL3QB24/B\n1qSwsnHi9+AigXAr78ZeQ3n5szrXdMF94sUKWUs4LcNC35Jn0IY8XgscCFMm\nTLvamBeDd2evxkmnsdK3ICxkZ1HMqOtQA/BOOj6PTPhRbi9bTzXDd0dLuZT6\nNJBpOBaoErYWucDGW/DIJDVti4Seb7hCqKlnTQ78N4acuXEeDBJMxZyTeFMP\nwzwsgkikOJoWa116rRqfhIc++6EYXrmOSml1UIUIhwT4LCuuuENEVH0fQTi4\nfHltctizfVzjVet7YhXwJnKq80HrnexBaFhgO7Sj0571joAHrn1VlPeOqMiH\nHoZPookpfVLlSFOLErVMeQy8tCoY/7OebVy5AX94Xxr4GQWXzEis7A9XGnUd\nWEgcvM67JfJ8JHDDIky2b7dNvWws++qEFWOaNjE0c/KMi2BD3MUUiH9G7RRK\nXmK5qyQ/xlbNfD7vlbjJ/w8gostuEvRPP0EcHZbKZ8x8hBMCqfxLrZjKauho\n7JMW7dIyJi4VBAiwNn/azV/S+LuL/smIz9V1Rh/SxpvZ/T5wGgWU9RsB9C/1\nhz7drJ95HCySM0/zysAD3STS8ban11du1Qo7XAilRHim7gVYjwiuYSGyRw2c\niMn7\r\n=kj9s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFX6rWSHwjrNGjfCOXhLWICgScN2MOvv9fiS+wJUy6HeAiAHlQbW/Gb336IVMszgc8pWA4cJb/7OzVLwX7p/ra0mhA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.9f65ced3.0_1597781818430_0.2240102111732516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-select","version":"0.19.0-canary.5962b365.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.66b8ed7e6.0","@material/floating-label":"=8.0.0-canary.66b8ed7e6.0","@material/line-ripple":"=8.0.0-canary.66b8ed7e6.0","@material/list":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-floating-label":"0.19.0-canary.5962b365.0","@material/mwc-icon":"0.19.0-canary.5962b365.0","@material/mwc-line-ripple":"0.19.0-canary.5962b365.0","@material/mwc-list":"0.19.0-canary.5962b365.0","@material/mwc-menu":"0.19.0-canary.5962b365.0","@material/mwc-notched-outline":"0.19.0-canary.5962b365.0","@material/select":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-E9QUWEWkb0i/LTIqftAWXDsDonbxbIJM13QysJmL9FlW+BROpnldashN9rVrCePhywjnHb1v3YP4/7e94MIWbQ==","shasum":"210931b136ed6e39b076fd2b2fc267833c2d5b8c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.5962b365.0.tgz","fileCount":46,"unpackedSize":938240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYu+CRA9TVsSAnZWagAALLsP/ikCw8uSMMB1VCdJmqmc\nzAr0rv5eeCItZz+mk6groyZh+p6h+E6C9Oxx3RH9IJtN8V0v11JoeZDsJwPC\nBTVK8zz1MaS243JAAcDJlb1i8HimdbX9w5y8OCetKqwW2FuYSgwC2V43SkqL\nAw4Z6M5Gn43jVNYaUEMJML7si0CHaWErhUA/HL73mbsj5/D7qhF/8qZmMEFa\nEzrwHUXsdTY+w3TcZlgu9uYpgr2ty4Aijnw5KoIbsnaqqugzXmn4FZQYNZRF\nSrANOXmyfcfnxgIIpd1ZXSAFJQTG5D/4Snr+XKMn3d1/CaExGnqYyBEoZ0T1\nM6baE27xisF7R4toNXbANP7dCYdBiFBdrrhFAAOOa027R/0JIF7nYRzkRxYo\nf+NVRstbUiImNgGSHtx4ZohE3XuIGsiSlY4DyduUbOEGX/dJJJS0bC+xLHik\n4K7C1/G/4iMpay4nWgQ8R2DgPPmvxzwltKe1zwW+iNVnwCYC+xknVXE+jBA4\n1ouEkK6NdQG8jbndhfOWffKdW4Dtor58OdugafFJII58fEg86gRBSudIg4Vk\nvEnxtzsALXVvQn53hfMxzMoG7wcz6B8eICMoQdyJljoTrOlHnjH/Mi70NFdj\nz9DGuU+ZTpA9jxhbZuMyrFhb5iGwo3AYxvDq//DwkpydPsghol5LCxpFuCB+\nPsUR\r\n=r6nZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKkX3JmnUFlQ0rrmXtTqaNbPVMAaaZeTjfdypsf9+rUAIhAMLdWu4tKNN1DLp1rO8WRA9mujdGrqDCkBr7cIkuT48l"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.5962b365.0_1597868990364_0.34016596429461377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-select","version":"0.19.0-canary.9c9ec756.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.da72839f4.0","@material/floating-label":"=8.0.0-canary.da72839f4.0","@material/line-ripple":"=8.0.0-canary.da72839f4.0","@material/list":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-floating-label":"0.19.0-canary.9c9ec756.0","@material/mwc-icon":"0.19.0-canary.9c9ec756.0","@material/mwc-line-ripple":"0.19.0-canary.9c9ec756.0","@material/mwc-list":"0.19.0-canary.9c9ec756.0","@material/mwc-menu":"0.19.0-canary.9c9ec756.0","@material/mwc-notched-outline":"0.19.0-canary.9c9ec756.0","@material/select":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RVP2QlR10prVggW1WyAs+PLU39TWIB4iSan1F/ZT2sAPlOsQPZooNc1mkqIMbIlur85sQBY9tjMGvgmeNRHZBg==","shasum":"3739aacaf7704dde85ea557fc0e3a8eec43f9219","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.9c9ec756.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsdhCRA9TVsSAnZWagAAysYP/0xGHmfpt/JxEXq8VHJi\ntWyjltaF9Pl2mBDWdxXWpBRxcgrFy+H/pYJWgLgG3GBxVOOS8Id3eBUIdjp/\n1afelPOheQ1jmHTJu73XGanmZ8gMX5IF5WVyNP9SYOry0qZO2PnySak6h44s\nd19YcC0NhdXb6LefqCGwmVFu6C+Rn34WfhU1oBq2dYO2gibRgsrKlUNf4NSs\nDXNT8LDuRMua37a0A3UAaoZVsHuSau6SEkWqkpvsdpYeiBrcvmaYu9nJfxah\nPvEJYi9+VlVbhTsZIfH0Zve6FvRKKz7ZhfNKFXlxkEOgJbnOi29InoJg2c49\nMgIP08zrZmWu0OjIB2ZLNag6bAW+Ig1XoeUfadhW4iWjHOVHt1eeodInVZew\nHdFasMnu1wMX0s1nQjSW4ZVLf2GC1nKLpfV1Q1AJiEco32AqMqNian2byVmc\n3BRv12zUJG87Fz1Y6dzD3gVbAxjQYgihGKrwTo54R5HcU2+adQIfd0x2fvMR\nahxcwn4pIGzI7ov4mCvSPqp0PvJCBpGqO3SbqUyVh3kbKAKDswEVqqGM8rLr\nQk2HPq4Owz/oCylZDOWHMyNowJyF5RwkTzWMuxec7BZPoGq+Fkybnr6hHPrg\nT19F8de+SPP3Gqwn+AhbwQzzFuggyClJtK2aFHbFsKEa8wSlCx0ybcONXvpt\n4ZIZ\r\n=hCo5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9PE0C5yKR2+5L5nPIK+RwmQ75xus6Sen2IRNwpO0dJwIgNZh3/J/+/FW9azJBRGmfskUeFuK8qKhDOOWQLJYY3os="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.9c9ec756.0_1597949793054_0.35954190274385667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-select","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.da72839f4.0","@material/floating-label":"=8.0.0-canary.da72839f4.0","@material/line-ripple":"=8.0.0-canary.da72839f4.0","@material/list":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-floating-label":"0.19.0-canary.fa0ad66a.0","@material/mwc-icon":"0.19.0-canary.fa0ad66a.0","@material/mwc-line-ripple":"0.19.0-canary.fa0ad66a.0","@material/mwc-list":"0.19.0-canary.fa0ad66a.0","@material/mwc-menu":"0.19.0-canary.fa0ad66a.0","@material/mwc-notched-outline":"0.19.0-canary.fa0ad66a.0","@material/select":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TO/Y49AJUW1nHlRot4RJ6TUWIpC9qKEH2cfp8vBQRT5Le5CNPZR/lcz0VbS0omrgnZ8JdFqOQau4Ozw/bJUC8w==","shasum":"38cd56b18901fb9bb05ee4c6e22d1e620b1e436c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.fa0ad66a.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt6gCRA9TVsSAnZWagAAVMEQAImXByZ+aA6dwRY2yVQc\nChQbIVYE+MVFJbrutnJJcqGoftomndoJ5kDk/LlRjWeQUTY1xd240OPnf/WE\nDjcTxC1DtVjNjs3l5atzlDSUJg7onimm24BFqg1qJt0WbrsD9VhdRkILLqIo\nV/O5r9kor46NYkHT6n9GqcSZ2hOe7KN5Fq5U2mqfFvg+C42zkk6VSefJ94JT\no6DbObrnTHEE49enXjjBc0CtANTKDoLvDkeEB8JaBwMAgY4/qreFEaEgTveO\nefJv0xFZ1RXbpToZMfJRPjrfjlifQ2havPTaDhBgpQD1V6KWzu1Mrl8sUD3i\nbGKGtr0zvLzQngrhKhiqlBytWSV41F0nSNR5QQYLbSfbLfAiYpdzdMN0z59i\nLbRmQeMbd3/kuKZe2oWePQZ3HGYiK2/oI2t7JcxZ/S3pekvni4pzRz6cAtWw\nDh9ITkVb2EI2I3LAcRIvCsaV8mxk53KDZgQii5/i2+8Wy1l/5DYKZ2XrzEJg\nSfkWkMt0myhMW78qbVIeGN9DwvXEfScwkm420gHJn91fVf6x+Np3jgA1nHFC\nlIOrUfDfdzi7qMh+BbzPUPTIMHvuwE8Q0ivf+6Z10WFef1305w0Qpbsl4fGt\n5i4eIFwUdzTQ0TviqjtTy+ZsfqW6Fpq9nTWd5ByjGlPKGx/cTLo+CzJjtnwN\n8/ZV\r\n=dKlK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC7AmSNvQwBYiR6cOXApjkufV0zmklt3/M/fZyn4mlygIgcinOZAQtPWHHsK+sMDMj+R7/jYQ9TXcQ3bGHM4Tmqkw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.fa0ad66a.0_1597955743581_0.7952648231395194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-select","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.da72839f4.0","@material/floating-label":"=8.0.0-canary.da72839f4.0","@material/line-ripple":"=8.0.0-canary.da72839f4.0","@material/list":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-floating-label":"0.19.0-canary.06ecdd6b.0","@material/mwc-icon":"0.19.0-canary.06ecdd6b.0","@material/mwc-line-ripple":"0.19.0-canary.06ecdd6b.0","@material/mwc-list":"0.19.0-canary.06ecdd6b.0","@material/mwc-menu":"0.19.0-canary.06ecdd6b.0","@material/mwc-notched-outline":"0.19.0-canary.06ecdd6b.0","@material/select":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-y3+sEViGescOdgCJHVD1RL6e/Ybseng97u/BGr2rA3i25+MU+JEws+nkS4rAVj/kvx7Ak5rCTcynByW5mYiOuQ==","shasum":"0e275fa64f280db6812e800e752477ac78aeafdc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.06ecdd6b.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxuCRA9TVsSAnZWagAAhdwP/ikBQh9jlvDdKWvyq/zu\nyzF3fUhdwUDiVpIgKYIThH7ZSyMEqMDik3a8C5M/Mr2W2IVqFLe+XHDYGU28\n3g9ruvlWANmgDpHRxUFIA6RMYJyOaJsp5+YJPQjNJBoj2meZN/y6uxGl2aEV\nMrzwkX8M7VQeQAaEP/iQkEN/80RZsB1lR7l9r3yD0yUhOKmEABStMGCL28ph\nS86QVxymJv9um7/Qfw7hFuhkRJgmPI9pMXEafCeqoHWhdbRoDDOsg8sokcCY\n1c6oHmPqDwUXb+vhNenaWnAcnO+uH3r+PYlPKSFJRoQgm1havy/h3soc/O/G\nePiUfbST4vgVynP/rr+ypGqNRQusA7K2gwpmtPfJ4b72YWl16k7LLzRY7c2P\nR1wpwXbwkSQSpy+hBaaZ73S9YD2Qx8+bd4uwlihcJBetYKuUsCxsT3ITD5yi\nHm9PlgNwf6KtoYfP3suVDy4ggHl6vg27ucszT1xDIIEzGvIE1wlv7tAHqPVC\nzLigYBDxMKq9eSnUdfTzSeJsfXDuvG39zm/O0WKoMqIlEU5dv2MIt7hKMWXS\nF4pNLWNj3j4bBAsQ8rGg+pwQIrPbdL8XQoqxRqcq97n8OUxbnT2UWeEH8PYW\n1NfYmATgtx5GKF2Jkp9i8aolhIFdRLwRzUhaUbXochtsV2PVgtvAvrc2Ttot\nGK5T\r\n=AQ5b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX+Lijr4+c4p9LQ+AGp16FOpvid4l3uchKs70WuMqoQgIgdK3COuKlNAwesUr+zrmq+b02hO98ROMmrg1tTQATmiA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.06ecdd6b.0_1597959278334_0.9419067363767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-select","version":"0.19.0-canary.2bca2318.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/floating-label":"=8.0.0-canary.95e4eeea7.0","@material/line-ripple":"=8.0.0-canary.95e4eeea7.0","@material/list":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-floating-label":"0.19.0-canary.2bca2318.0","@material/mwc-icon":"0.19.0-canary.2bca2318.0","@material/mwc-line-ripple":"0.19.0-canary.2bca2318.0","@material/mwc-list":"0.19.0-canary.2bca2318.0","@material/mwc-menu":"0.19.0-canary.2bca2318.0","@material/mwc-notched-outline":"0.19.0-canary.2bca2318.0","@material/select":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hlwBl3gYz0VrEo2ZQ4C3JYe1KvDKaIkrw3tNcB1PUB+NMW19pZRLfw4Xq1kmRx/nyZWFDN3HVJigwm0tshQwnQ==","shasum":"8971800c426bfd90ae3cf5a9f00059752e2fd547","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.2bca2318.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAoKCRA9TVsSAnZWagAAAeUP/A9097fUW1oZArMTeoQ9\no7rlFnWjHfjrXW8UP4MDlBUj+sgeFc+oBb9H6f5lsCi3IxozNHi3djLGFSee\nPrRvC6OGXli59kQc4R4JnAsIcjBJLdi4G9DzJ034FCkK3rof7p3PBF21Rrw1\n7wHyWKNPS9/tnSWS3OF/zegpdcn7JezSlEJPRvcFTVzhMjB1Sk9yrGoQfQjh\nrUrIhHVTgBJlA63fGCvPoq2W19v5ivEIIZuoTR+Qr/Yb0oiZx7GI0BLe4d8c\nGOcEFVuSW31TmTgLt70X+eNbrjDIwITAhy0YMv9VKdg0hlq9XVhHZatWGW3b\na/6z1XfLtjorbUaakzDpVgGKZ7D1oTNh0FlASD4bq8ortXrdowwPV4cXs3m2\nCytSFasRQhQc3H5AiF3tJqx6rWB2fLPTeEd7ZL6dnKz2/ojmaXqYTIQiSVcX\nvGO8fXr1h+fgA0l+wvpeosrP7nenBZ40cYbndLC4ADFjBpNfO6vx0YIpdSZj\nSQYsMMa7vbSkX+lyaaiQRvRVsp3/9HcA9+Bg/7sLdkBI9ztgbk1GmPkk3NgZ\nMUayjb/3/sMwpNify7+KZFdMtZKhA7mqJrAntPojJA5iQDkA6AxSvRh5BsgS\nBzPdfnHq7+g8mmNAMVNmDYDpZtrcZrtNp7lte2r8h33RpamFNJxcfGfJ7AAz\nxN6v\r\n=S9zz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaCAxRk1bRNk7yL6vB3ywZbcgVFY9sCadyd2e0cf6pOQIgLazHoG9F/rRxZqYv7MPzLdcdv7gqtyNWM+fFoZtFHo4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.2bca2318.0_1598032394074_0.06308611841024847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-select","version":"0.19.0-canary.6aa47265.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/floating-label":"=8.0.0-canary.95e4eeea7.0","@material/line-ripple":"=8.0.0-canary.95e4eeea7.0","@material/list":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-floating-label":"0.19.0-canary.6aa47265.0","@material/mwc-icon":"0.19.0-canary.6aa47265.0","@material/mwc-line-ripple":"0.19.0-canary.6aa47265.0","@material/mwc-list":"0.19.0-canary.6aa47265.0","@material/mwc-menu":"0.19.0-canary.6aa47265.0","@material/mwc-notched-outline":"0.19.0-canary.6aa47265.0","@material/select":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rpDG+NFcP/Mh5lYwKkwLnKaNGEjAoG4coy4uSKyNPJh2Ulj5zEMqk6ZA4l5sZZ+Uc7w7/J40nbV+XjaW+92wEg==","shasum":"9c03d4a84427e838d5de43614bfc0c474c85cfd8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.6aa47265.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA+UCRA9TVsSAnZWagAA1psQAJ+w08KxyZOJVxxGpiQP\nl/mOAFQfM/ivoWBTmTtFnueSb523v5r63HBqYChnFbmO6xwg9TQgzkHjvC4r\na0BYpZH6KUtNkNJgEPBbqCNnaVHeeMfiEHLo6IseAlPibf8Pe3+TlD9HevZJ\n2JGHUh7HjX8NdV3PzIxqm539TRc7bwSFFjU2GnAPOsDNJMWuqAS/8PTHLYId\n1KCKAamGEbbWQpbKhx5Gju7TXhpMti+rKj32uWISKbDbxtn4yIhqdgjSqJ/K\nIlsrkpvLPtLMSEGWTmYb+rext68+vBqagwHUoTmeIzfC7/SRpVuh+8AQDvj7\nXXL13kfVyafeBh2Ad+yuM73c2e5SEXWVbPpGRgS3zXdh95YhBTQdbop5DYvd\nr/yTbwRTvs92lWFJgjXu4xHpH50k8K/RtJ8RcSFUQ+wU3XQ7FkbwOCCCaUzQ\nDqAqJfC3a2f+aotym8xRZR7niLdgsuMjWcV1qRgnKLxepZyHVKOK1L9GWcTN\nj4rpzn5zgjR6/7L5UK/ctayXnN97RKAk5dcA5+fevUSC1AdspSbxOdWEcvji\n/ty/P+IbPQDQ7v6LISH+UqupXRqKR0haoRep+S4fsdFifNpO9Hfjdw1fJUxm\nZD3OPtynDXMyQg3XbPYWt0eB2/dcl5lpp9tSRe1bu9eQtrJVIcerAY6QVhYy\nc1TS\r\n=pbdt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDm5/e/BqoY69Da2T/8jKZ9Qyim1Z+Vzql9nj6RwrtcYAiEA3NlxZitPaltyCAclk9F4ImpkSr8/SUrLk89FRTTSNsU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.6aa47265.0_1598033812216_0.2732881618713443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-select","version":"0.19.0-canary.e7202a07.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/floating-label":"=8.0.0-canary.95e4eeea7.0","@material/line-ripple":"=8.0.0-canary.95e4eeea7.0","@material/list":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-floating-label":"0.19.0-canary.e7202a07.0","@material/mwc-icon":"0.19.0-canary.e7202a07.0","@material/mwc-line-ripple":"0.19.0-canary.e7202a07.0","@material/mwc-list":"0.19.0-canary.e7202a07.0","@material/mwc-menu":"0.19.0-canary.e7202a07.0","@material/mwc-notched-outline":"0.19.0-canary.e7202a07.0","@material/select":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lVQjlpCNUc/vgLYE7JdmdncH48Gfx9qxBKP/91KK0En0vW+/MQnwLmwT5L+o00QUk2uokKqzMFfVtKg6/xm0EQ==","shasum":"df50248b08bb12472d178b5c20ee23cb3c3e81c5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.e7202a07.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB9pCRA9TVsSAnZWagAA43kP/3myNoh2dbwp/F3tYpCw\n5UyORGKX5foegzYFcNo/gfAcRimr5NT7p4UT5dtB9HBWTXz6EHj03r2yZjyd\nTKdU73jk5qIY9HpWncEL1WQk+3HFJMVp1juzJ9PuqAL3q5vP8G4pG11x1QL8\nOMIDJvRJ8T5cNTVHIFbNAuXTyz48li7950hQ3ZLoEqE1CvGY5cRAH7rMnB9M\nZwjY3DDRmBUX38TaZigxIlGk01Pp5kHwGchM8xGZy4Fnn7ZZqxHSPIyH8itr\nqMhrZqRZUsvq+yR+YThVy5PSY/pyZ3Shpjfod8Wr5l3AbnOvqToHGnN/tcn3\n46a7pSXts+5yblUpJ43lbd2yiBtWdOIenyK+bnoYaAzfRtQvZOPdvkT8vMAf\n1tM+JRIxEYol2IvG0eK0/S7Jol5giZdtLbjwSm2HL/rBfs1JIyxYeKN9aCUx\n9LoSVhDWu7NGfHczRAJjNgEZxRffFeSavzzIm3XFfPgAe3SR9yzvY1zGm2N6\nsi5q6nWUfwa3+SYLQYhLnacRy08dcqY2raBHS8C929O4wVsPdoppS5WwvX0i\nIX5uhg83Hezra3X7HjR15dvuIra9S1pItGEXUvC8LtA4xZRfCb9mJvPWVdxb\njath9ZqVqqsvcxlBdHbrJzAUlZBZm21/hWKWrUErdN5Z0fcWx1pTXH/smHeQ\nsZvr\r\n=QIkM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXZh/V0EQL6YNY9a8+pFVVZl22xf+/Qx+NB3t+tG80rwIgMdYMeWEvo6Qy4akqNbBw7QbWP1PrgkOd/gBKXgYV+IQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.e7202a07.0_1598037865511_0.29411249499009084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-select","version":"0.19.0-canary.f208201e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.238216fc4.0","@material/floating-label":"=8.0.0-canary.238216fc4.0","@material/line-ripple":"=8.0.0-canary.238216fc4.0","@material/list":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-floating-label":"0.19.0-canary.f208201e.0","@material/mwc-icon":"0.19.0-canary.f208201e.0","@material/mwc-line-ripple":"0.19.0-canary.f208201e.0","@material/mwc-list":"0.19.0-canary.f208201e.0","@material/mwc-menu":"0.19.0-canary.f208201e.0","@material/mwc-notched-outline":"0.19.0-canary.f208201e.0","@material/select":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ASq+D/rA8vY9xXkDsCch5ohqT/KzFhtWXgDyIyR9XCV7BKVm4MQc/JL+JFFNFee7mk1eERhH5re/fmq34lk6NQ==","shasum":"5aa2de57683d70a141215652327734c718df7a65","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.f208201e.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA8eCRA9TVsSAnZWagAAm+QP/0ChceEe1NejjRvcfZIj\n1PwG0sqtufmfs+UHf/MLRlMnJg6ciN+8ACGUESeDQP7oTgWaLa/wb0Q/Rxyo\n5GurCvYAJRpTzHxj2KBFQXXaJRTXuPhiSDnzKf5Jd04H2xxkrYvgY1b7yaNx\n79K/fs4Alfx8mhblfRw+OXT6kMduHpY5A8Xn8aFuf67CwpX5uuYvrV571E7I\nsSlPdwO9s0z1/NM8BkeuDfOQDdYyvx8hjH57d9HJinHFAm8kzDadg+IQ8e+L\nHRPFr9onU78/7pwYJjHNgzwB5AuOjIVwgaefqfcm/yyD7I2g4ik73kfjG2Tg\nAGx8I4IGQH6hsqI/glJAnfu68k6JeVLs5K+v35RY5NNCz10oEs1VpweNOiGi\nWQpvICKJ2iRkOSnSuppGbDcFcw6Jz2kRMtD8lNxBQjh5BWDsMYPpf9BWh/lS\ncfSDJlJfEqdP2kkL37iIRSMFYBUdejVFXgvzwuVYsOzRpezQuP5LE5ZlYHqU\nb0lk0l8YhlADL22zNMalaGhUCDFdLDGFRoFigKKtiTYXuqYVD5KB+frQH+Dh\n/FeQa7AQ1vwk71y3zE5nWBV6XYZ1DiGdHK2Ho0zDv8MkJKhU83JwHSajRCsL\nlJ/4JDubyuJC6aGpwH4YIn6Qa6ajvPBdqJkx6pqv8quK2YXhptI5JwyCValt\nVtb0\r\n=lwLm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxuQmvoE/E302HpOZWtvrGxbghI3qk9gYO78kVdlLqCAIgNPofBMNcNQs0Sa38fbLPG+GwuxEg7kWs+BI0lpVUp7g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.f208201e.0_1598295837548_0.9684117821542215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-select","version":"0.19.0-canary.14a172db.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.238216fc4.0","@material/floating-label":"=8.0.0-canary.238216fc4.0","@material/line-ripple":"=8.0.0-canary.238216fc4.0","@material/list":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-floating-label":"0.19.0-canary.14a172db.0","@material/mwc-icon":"0.19.0-canary.14a172db.0","@material/mwc-line-ripple":"0.19.0-canary.14a172db.0","@material/mwc-list":"0.19.0-canary.14a172db.0","@material/mwc-menu":"0.19.0-canary.14a172db.0","@material/mwc-notched-outline":"0.19.0-canary.14a172db.0","@material/select":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-w1aZoFXLwT+tmDUeCSDevF3a7O3dc98KGizv6PQ2jxkeLkezMQoepnFj+l22MjB0QBpjjludphgwkhcA5eVDZg==","shasum":"798772cfde0880aa889fa84623ca62d039c9bd47","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.14a172db.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWsTCRA9TVsSAnZWagAAaEsQAIykjCpBi3AnJWviLCgb\nrPnjuivAP8hZg+91AHpkPZ7pxiUb+ldOFJ2WXUlLWt+iZQFMACrOcn/9n5pa\nWgNliPHQixQ5MMK7Yl5f+sae5epjaj3+I7n3I60ezQA5vu4kjJ4tcHSlZ96G\nwfzVYqgW2bvUW7HtLW6ngSp2nH2tHMf+r/vh4FloVNeS+xViK+Voy3lmsbCk\nIJPGKH5DwW3I2P3B+Sv1hR/bXcVrFw9tynoXW1PxOjLVLamJjdKsGnNNRCjy\nALm5iJFYY0C3zwAkvXP7VRgJA9VFMzZGqhJWK6XQVynYEnbhS+V+6uAk4rpq\nO4VIfFnyCg+oKMsxh7Oo6rxV/nbyguKw5XyXWQ9vr+eKkaIZ+I9icn+amkuA\nOxMOE+dk0qhq6lS212XvrlzTiveqdcrR7ykYMbSrOOxKcpaeXjGauxSjRKiz\n+SOY0uXM9VQEbmMgzxOiUwI9NT2UWwpHj/pCm41Uvk2QU/N05Xn45F9jSF0f\nlctCsMRIDoBIdMCWK3S5NC1RX6WwIfruEJsCOOS3y9XT03jEJ97VVuvtuI5G\npRhH9MZ7VqQVK43HINLlEA86unA1XpTBMNoUhy+NIxGMqdUVlVwxKkoVCfjb\nupPBBBXNUi6wq7N/cLPVCra3hGuhKyV1WnIC1nCejPKT0s4LJ6BDrCEaCLBp\nNOUL\r\n=6yew\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9qNYs0WSgrqCXJTi0bg9nchAQw44Q5BJt8DPZ7oDX1QIgNzq/gY0lPjZR0Zg4aBuQKG10ENDv/bAtS6EQ+zEe3Vo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.14a172db.0_1598384914576_0.8909411958058562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-select","version":"0.19.0-canary.e6c1038d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a1c65593d.0","@material/floating-label":"=8.0.0-canary.a1c65593d.0","@material/line-ripple":"=8.0.0-canary.a1c65593d.0","@material/list":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-floating-label":"0.19.0-canary.e6c1038d.0","@material/mwc-icon":"0.19.0-canary.e6c1038d.0","@material/mwc-line-ripple":"0.19.0-canary.e6c1038d.0","@material/mwc-list":"0.19.0-canary.e6c1038d.0","@material/mwc-menu":"0.19.0-canary.e6c1038d.0","@material/mwc-notched-outline":"0.19.0-canary.e6c1038d.0","@material/select":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XTzd66oSCDqkCXhXGPuKMjbfSnrq3d3kT+phtKhFJC1JfJ19hgM0rePkK/OgNP63066u8DR1BP9pWympKBdmfQ==","shasum":"c58a3ed694f36b096d431a18a98a887189807575","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.e6c1038d.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAuKCRA9TVsSAnZWagAA9eUQAJFz4ZO6xKOrQ0e9lYdY\npDe+tXpYNMivDciGaCCwPXR7NnvGVDwvvf/ag4HqSAj2aoKJLSfqLHXtN514\nYoKWGQgcowg6ssFrtMfqkcgm4cPXDK3eFIoebUcsMlpMevI4mk4jjuUDmWCs\n4YYOSd7wNevpwHTsQMF3hBCRRtezfRA8FfTRpxRij4Mlk+lwP9bRgpaTOo4F\nhWzHROm+xlXET2v0t12Ry4XBgnvEeece/+emxe/aCuzd5xu2kSE2ZFVAnper\nEUvrdiTpuu9S+vr9z9a7IYrkimgrS/aHYIEPB31LN3QnfVO9fGMHfZN4yYf6\n/fgrdHezj7gc840uX1XTE5er2LfpKEv15YwaynIjLdSOXs1TMXx5VVqgaNMd\nIC6zANIiWBTTWw3JwcxWEe4V2roOQ56msa1Rof1L9nUhVLvzNcUKS+lpb2Mj\ngycvNQWGJUUUU66tR9wlE0jq0WrYPj6YQFYcw5651H4k5FDKwyV/jn8lW3Ci\nffR41G1TFaIg9LAW0XWAfdcvjA//AIHQO1rq00Jp81MUSXo0Pkuydaa6G+hS\niKvWemtj0f5uFIRIlgz1ckLcGWWiEOGXWIVmMMvoz/Qa5cqBC2dhsiS5/B7/\nA0sbfhdQOsvISvtZPQ+z4rFNokMvnF3furozLToj3Hl1tqsVWKgpD/Eg/IBi\nrK3S\r\n=0owf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaczYq8StyuicRpUskbQoHcDQd96EMG0zHYqWwGdwovwIhAKktADdJ0+Uy6OWD8PkgZDOCsSeFsfRd7Ggwegw9nIpy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.e6c1038d.0_1598557066512_0.9987041101003711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-select","version":"0.19.0-canary.34012082.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.238216fc4.0","@material/floating-label":"=8.0.0-canary.238216fc4.0","@material/line-ripple":"=8.0.0-canary.238216fc4.0","@material/list":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-floating-label":"0.19.0-canary.34012082.0","@material/mwc-icon":"0.19.0-canary.34012082.0","@material/mwc-line-ripple":"0.19.0-canary.34012082.0","@material/mwc-list":"0.19.0-canary.34012082.0","@material/mwc-menu":"0.19.0-canary.34012082.0","@material/mwc-notched-outline":"0.19.0-canary.34012082.0","@material/select":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0gp2SpoqU7nXwP2+X6XSdxO6tiyJHPoUBDUKGhAMk1Huoomp13JBT6+xfKhN2bd+JVJGehrg99OJsUD/j0Lo5w==","shasum":"88253378b5eb9b3e7fe298efd0efc4afe69e4b58","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.34012082.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA40CRA9TVsSAnZWagAAk2sP/2MbekB9lv7BrHgCyIrr\nHOog5cxYJvK9uZh6MDB79xdaks59feCru9+GvCb/C3iu35yZXSY1utV4ibHX\n7hDj+TZpUPDVWWaNgwZ2ibBJeRvoX444KrQ3igk+eNeTa70SX57HBU6JJDHh\njgW7g6bEJAmesYudgbZSooWBi3ZmtTvrqghiJeZFJPvA4N4bJv5J5+GbJNrN\n1nNOjf6XBu0YTbvOZReDiWlCg8J5HBelb3OKIt10K8X6WooKyvbBj5S7pacj\nML8yVCCZaLxfg0DkP3Y/y1fQ/D0DZ7SFXuLiXf11izKfivUJB0nFqHH6iIbh\nY3oOcnX32KlyholkFGJsRdzVTBu9OBGornngkM+9le/O9qfDmq88bGyy752v\nDdtlDKmawEC0t71gJ+P63D60DITXJIiOYYFoRccZgSblesUcbps9Tfm8awhU\ntnhK4CqR6XL7T3h71O7yj3QvSh4BBFfe+F2sZOWrMs3BnmmkXTGex8u7CSpn\nmVoAf/YPGQaAZEn2pXgMGqSm2sWrdTdE2DaBM2Vc9tnEiOG+gqfYA8XmNRMb\n8H716vnsVJ/HosUDnhcZLsRTBqpsmEL3HnQzl9UZ9m+rg/60QRrb2QlNSjxB\n9a2M7d/B8h8+j8H5JXV1J5rrqvFfqmc88VKetfr2I+I9989karo/mCJn7x3m\naib+\r\n=vvW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTVduf+XV4rDgbvuVmyROaTi/tqkPIE4HIjNzv1cze4wIgXq2RtlfoIS8CtIF7KLgZKA0gWpqXz2vELj5HfOfc1Pc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.34012082.0_1598557748410_0.38370160735265957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-select","version":"0.19.0-canary.c073f7b8.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/floating-label":"=8.0.0-canary.911014711.0","@material/line-ripple":"=8.0.0-canary.911014711.0","@material/list":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-floating-label":"0.19.0-canary.c073f7b8.0","@material/mwc-icon":"0.19.0-canary.c073f7b8.0","@material/mwc-line-ripple":"0.19.0-canary.c073f7b8.0","@material/mwc-list":"0.19.0-canary.c073f7b8.0","@material/mwc-menu":"0.19.0-canary.c073f7b8.0","@material/mwc-notched-outline":"0.19.0-canary.c073f7b8.0","@material/select":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-anrakcM4fDWHpreWyVOihYqok3vKYbL5VG4MvOekMlMJLGvRyIAaZI93FN9tHBWx/LkbfEFI5sD8PHOK0Rbteg==","shasum":"1d72f2bfd48e350b71b6a35c2e8e9a2a57307a6c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.c073f7b8.0.tgz","fileCount":46,"unpackedSize":938120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTsRCRA9TVsSAnZWagAAYsIQAJQoOg1s5A9zdD4Z2Q6J\nPaHe/K5DVrC+V2vRvp93sVmuy5dXwDNPWdiYQ2o/qKD6iYZsTigJhVa8/PBl\nESAXuZYMJjynGDzrjgadMKoFbunRII+1kZXk8e8V9JfNSAtDiYWHOXDixUVf\nItsk0uKSNPiCAo0P0eq4dHT/uTJZnqSgJxRFwP1GH0uzOcWjBGHGHtxLcm11\npBCw37pskuWLKDfX2onhqIanIKOzF1t9EodlwWl7J4F96Ipbxn2KxryG3/8Z\nwqmbk2cfWyyotedldy/Y36JRPwb2YStD3qLZRlzEyfKvE8OPB2XbeVAaqg5L\nNAL4eWwspim49SxvDzI1Rr7jValvu/uI2fHjgXELwfPYAk8p8Ex9YfiKaiyW\n0P+W+eutEE12IPQztDYXEWdo5C+HVod8ZIxMq3U6PRg7/Px9WJ6IwY5cpRLD\nEqTcjPefBqu+8NGx9ZAEGwvpvPfAB6YT7yNJwOxuO2Ad8znJDd3xjA9K6hSL\nCZ5SrDr6WD5P0b5P7qqY0QkoMU9N13HMX7VU2H9vz25LaZRdlAcJ3CwJX0nm\nXyip9PeTGai1z7M3axk8XoR2w2cJrfrmb/tKIGobX8i+gIz1GgQ/WpztJWAS\n97R+V5kndsbj5RrFGbBh0vMl7408T7FFPjeBAy6Y63Vab+9jtvqPrVIZInIG\ngV2J\r\n=xA+1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrgCqYXfcPtRyIQOhQS0CDwvpkk1Mhsg8+MWEIxP+BcQIhALhP+R5MIYnl8TvsEERRUbikMtNrinBZhbKlnNzlh7nR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.c073f7b8.0_1598634769037_0.4557452946793399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-select","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/floating-label":"=8.0.0-canary.911014711.0","@material/line-ripple":"=8.0.0-canary.911014711.0","@material/list":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-floating-label":"0.19.0-canary.b7ae68ff.0","@material/mwc-icon":"0.19.0-canary.b7ae68ff.0","@material/mwc-line-ripple":"0.19.0-canary.b7ae68ff.0","@material/mwc-list":"0.19.0-canary.b7ae68ff.0","@material/mwc-menu":"0.19.0-canary.b7ae68ff.0","@material/mwc-notched-outline":"0.19.0-canary.b7ae68ff.0","@material/select":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aj60Dwkx3OUDjyEPsdGtr08/cisCdySg35l5IFjCiS3MH7z3LNR+/nVdK3+tncRcq0nXdzqXNlMxKqvWAB0P6Q==","shasum":"020582f7d0c04f8a20427b71b549bd56190bc4bf","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.b7ae68ff.0.tgz","fileCount":13,"unpackedSize":199502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa8TCRA9TVsSAnZWagAASv0P/jYLypKf+L29g46zOkt4\nU1xfMMroIPGE0zcH4mB20r1ZyTjSN/uUdQ8rxmWcVI1O5trAmkTgZykdw1s/\nz9+xnArFYYjsWyCHmXgyHdjp+X5wNHKFqslWm5O/Fh8TUsyCm5FeuFG2F0SY\nNMrF7tjOaax5WknV9CVA2SQyZxwl8BYRUTfqr5deiPgp1Xiv//m8Gl0WW4cP\nqaVCzSLeeasPdJv2lnG6JGWBl4tp27nAXWe8970XHxPQoftoP68wz/D+Ixdk\nsBGZfFq5kvkLYvqjn2CJhk7/hxgxy5uBCRHF2+Q5/uCZ2JglB/ZIJGwst2PG\nUHsN8TWtenuDM3SqT6O9aQWFDaKu1reXwSMSJjd4NuR47JlYrDdYgtm4eHat\nadzKTha+I1BfY/EW0iSg9Ds4oXB05OBtH/+syaU9duaScUIArhdUalR62sma\nAZrjX5AZMBh/4XE2tTWCTqjZAw8tbRszJ9O6C4ni21OP4ojtjpk7SZqdyO/s\n4WeU7+B25CiCb+ch0SwcVTFhMO+pKqPAzIZAFfLAlCaPWy1/2F8jHUnaJdid\n2PfrYBVaVophWyx2sP9zvLsf/5k2cl7okzHthX4FS3wYqyZ/GHAlMoXKxsWd\njHbzxzAUqmIoNP7nK3Lvj8LR00LdP5RJOOYRIe02cnL3LPdN7hKwgudI5fyL\n+0Fn\r\n=nDmB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDp0hZ1Q+pj3RCPXDKNkot6ABZFcBoHLDmu2udJBNYahAiAEAr/y/GC+zU0HLknGw3GDplJSf1qxoNTuBQaGtHC5Ww=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.b7ae68ff.0_1598664467246_0.5608041535307449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-select","version":"0.19.0-canary.697e3879.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/floating-label":"=8.0.0-canary.911014711.0","@material/line-ripple":"=8.0.0-canary.911014711.0","@material/list":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-floating-label":"0.19.0-canary.697e3879.0","@material/mwc-icon":"0.19.0-canary.697e3879.0","@material/mwc-line-ripple":"0.19.0-canary.697e3879.0","@material/mwc-list":"0.19.0-canary.697e3879.0","@material/mwc-menu":"0.19.0-canary.697e3879.0","@material/mwc-notched-outline":"0.19.0-canary.697e3879.0","@material/select":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+N7Z2VJKZW+IWlQOcSgpmoDics+VPo9ygq9R3fj1pSvKKRWj/HgugU4ZrD0UJxFv6/Yj1BKXtr6270lGkcN0Zg==","shasum":"7b98f5c4e13014f637a24b7c6afcf537929d9198","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.697e3879.0.tgz","fileCount":13,"unpackedSize":199502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuPNCRA9TVsSAnZWagAAllQP/2sD9d/mVkESYPr0TxE9\n3O5QYmEp5G1yeqfnJ4nCJVX+LCpgYZOfJODB+XoCjapGwXDEFHe/e+XW94J+\nRO0YsJ4Q7E3aWvwGEkXSS9sIKapkYNEe+5eZ2JrbzyGWrtQuq3jWlKxL+lsb\nwrx9AwmVMSMXCM9D7Ua/Q/Y+jELCN7rkldgYdbUDFyvCSmYdAhP5R0WU6Ri2\n5Z3cm0uYM494guYupFwHQBip8TB2D6HkXw1fKl57vdfAbB4XbBidNGn3P1HL\nQIFcptuE3CzTKr5nujQT0LAB0Sow9CneHh8znrHK6hbUDOdC/vgJuxGGV950\nKDGX/EJuxKipiTr0f6YHloqGrbeTzS8pnZeLpivbEPl4/KU6nxsahAlS1NnO\nRrP1K1o8oLvMtrqzK8pY1TzA3Pu84k36txRahrGfbGu1v2KWR2XgsFwTmuEl\n2r1smoCsO9QAkLeyL9kKWOvKf1ss/ZokZJrICz8ObzsYvCJqdGL/OPV+8aWK\n6DGdavICkE8dPC1xV+Gal9dxSM6jPe2a6x/vCuE+SlhwUfX15xkMLtK1pfyV\n5PwWLzVwV9EMe+2V/7p7bcwdT9qyHeSNSCQvW9Ulrn0OyquF7P2BwVAMxFYt\nrAebEwBty2eKSOLkD984oNtASY9a/C2vbUEE5L+3Zua9+amkZKDy+UW4+nRU\nSXyO\r\n=oLQw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEcjkuOAVfligstT4L/LPD3rDmfUQ1MaaHjDwAp9ybQlAiAau8HUwHQRZcZeJOQ4y39+iHQtuVltWBmXjHH/x89SLw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.697e3879.0_1599005644742_0.4474194239561162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-select","version":"0.19.0-canary.eafb7991.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/floating-label":"=8.0.0-canary.911014711.0","@material/line-ripple":"=8.0.0-canary.911014711.0","@material/list":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-floating-label":"0.19.0-canary.eafb7991.0","@material/mwc-icon":"0.19.0-canary.eafb7991.0","@material/mwc-line-ripple":"0.19.0-canary.eafb7991.0","@material/mwc-list":"0.19.0-canary.eafb7991.0","@material/mwc-menu":"0.19.0-canary.eafb7991.0","@material/mwc-notched-outline":"0.19.0-canary.eafb7991.0","@material/select":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_6200ee.png) `#6200ee` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-theme-error` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_b00020.png) `#b00020` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nph4koKwbqTDYqGoQUT2pJdfW8a2E4g5N7vJpSTNvK03KSeopj2wx/ucweZ2B0FpEppExxazT46JccX19xB7iQ==","shasum":"fb4a2e6eba8d83e8b11d837d47f7c10b6d239cfd","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.eafb7991.0.tgz","fileCount":13,"unpackedSize":199502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwEUCRA9TVsSAnZWagAAx88QAKT2DplwtHK2Hb7PJBHS\nrXPQvoIYXj7nwQzqp04BINpKXYgXIinI3rxsylAg+SrJXoT3dzorhOcXLfpG\ntEDSB2XxckbIYn/2XUlQfysRxKJsnrlRqvf6ILD7NvunMN4N40zG72XMHOIr\nmMNxmAp9xqg1jDGNxuEaMN8posmSyJDATCrlY8aLNWvEvZNIQ2lkWVeZ5czh\nJXbLiqg+zcpmFul8lDyeJoW2HM8tzPHofXyt5Esfz9C/MtVBbW726k0FhtjJ\nQ3dP750CYK+BFvR4Zc8IGGcFfaZkEK+SInzKrOUxgjAAnbc6s/Izjndoc2Va\nhbgt3LUuX/b+ZzJrDSTR+tiRqYUaXXsXV7TO0MiWN36WgcT4KYqtlDIySlRT\nKYWauKELswQB+tuClyz/HRrZIxiUeVVK3z1TmefjwdYflCtLXpN6fjiTAbuy\nuTyWibF+iUH3OFQYrtIAVrP1xgwM9ZJl+biSKWJWWYBY8N3vw/L2oYWiHyOZ\nPo2tHR+2m7t9q4GLE70DmC86OtI24SXYiOlDYEMyuBwGxhCOWqaaBHKutuCM\nJi5XZqYhQaMkGPncH9swgXQtoxtr9bbjKYMStO8ulAi8t0GpEaRRZM8/meFk\nqTOVIiCye0l3t7+J6WUqvUQaQRv2jal9crWt0NfFNP24GYocYXpgaFDL+jjs\nO7BN\r\n=b7UX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkWii9EkKfdfs0MRVDwYgMA0qR/oFdBzA6NE56yLCGAAiBCfhKZu6v2jP4eY1Sgi3iCKP/IS4mbG8rOdoIVh12yFw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.eafb7991.0_1599013139773_0.38937826836389444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-select","version":"0.19.0-canary.606642ec.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/floating-label":"=8.0.0-canary.911014711.0","@material/line-ripple":"=8.0.0-canary.911014711.0","@material/list":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-floating-label":"0.19.0-canary.606642ec.0","@material/mwc-icon":"0.19.0-canary.606642ec.0","@material/mwc-line-ripple":"0.19.0-canary.606642ec.0","@material/mwc-list":"0.19.0-canary.606642ec.0","@material/mwc-menu":"0.19.0-canary.606642ec.0","@material/mwc-notched-outline":"0.19.0-canary.606642ec.0","@material/select":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NQKtM+p86eM2nY7EWTh/hVkdQbTdY39b27TDg6/EWJO0PYxQlUfIpfOoQzVmUcAiVRKP2EFp8ZoZ9tv/pAX19A==","shasum":"cfd045ca654148699a4358bfc04cdd8ecaa34b65","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.606642ec.0.tgz","fileCount":13,"unpackedSize":199349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBBZCRA9TVsSAnZWagAAAH0P/0eOR28mmEg/iSqiFLX1\nZdQltfPt/E/CLhiS7xsDokHHhO/4P7434PQbfErV7nppEVJ0Qd9a172Uf4AS\nT/xxCstcQYOH/fmfwGS+KR2mxzsK+mD+oE9uVTlZE4g6JOLM8Dx0pNL45TrF\nRFk1GzyEPkEV4Q2GKqZVJ+ady9H5tl2pTCXLIlju72OIhT4E6YFvrF48GwUB\n1MN2PP9s9sDj2mLDhswRs/76mmUCNZT4oBrkqEb2/grg6ndSzKONHUH7zoy1\nIUheBxn223NoncOv7IhRq5xK9B40nfCXuP/mY+ykTXkcgcdMtbhRh07YwjRw\nESHdcnVEaAOYTHlq0uuw6p7v65s7v7q2d5zVgYG6PCARQ1k3qEkZLOz7jF+e\nER+oYG7h9VdaCxSzyEE140+CfqzgEA8HSGxtKBceVz1kU3QxMXjHie1DpCcn\novJmrkGywdKeNp/+RpqDOozcbamCiQ5IGZExoYW3Af3ln+CUmQclUSWmTdQC\nKSLvgOsUyKuT/BExegGfL1CMAfejc1SnfjcydISxs2jVWvNLHBytUOl4uBit\nfMs6GtdplhkAUOtf/KCth8c6TqoICGHFi1/Cw3fk7908eYSAe6TFdZtSuGma\nwYEXd6krYpNgvUs/JD4CT35eCUkuOIjiM4duU629rgjLf7KGVU1Eg0N6y6WY\niBCg\r\n=GCoX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA14pJQ3GNK3trl8IVaq4dlfeO0Pw8ZyncWOHOJ9VBkBAiEAh63tyjLyW0eElahkigA3Sit8S+pQ03WmmKKUXYDcvPA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.606642ec.0_1599082585207_0.39597596037411487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-select","version":"0.19.0-canary.ddf05c42.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/floating-label":"=8.0.0-canary.911014711.0","@material/line-ripple":"=8.0.0-canary.911014711.0","@material/list":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-floating-label":"0.19.0-canary.ddf05c42.0","@material/mwc-icon":"0.19.0-canary.ddf05c42.0","@material/mwc-line-ripple":"0.19.0-canary.ddf05c42.0","@material/mwc-list":"0.19.0-canary.ddf05c42.0","@material/mwc-menu":"0.19.0-canary.ddf05c42.0","@material/mwc-notched-outline":"0.19.0-canary.ddf05c42.0","@material/select":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-opHIa4lts3uumUMfjtrM2p0rTRFMa9ftNHyge091lxCoe8pAIy2IRgFNW6ehrzRqcP6cCiNA144j9Da8qOa8HQ==","shasum":"0ff23741454221b539daad54e7dcf742681c27e2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.ddf05c42.0.tgz","fileCount":13,"unpackedSize":199349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVuCRA9TVsSAnZWagAAZwgP/iIZ/W8rYTFK55r44AXS\neaQ2U1xjWucsXiaPnyIQxn0Wp86SkVVP6usA8ScosH2HEjAsBUgF8wwCduWs\n/O67ouazTO3WApaUdLevbeVPyLhowKaRDI+CHZDB/oKErIQbv4g/ehRdWNX/\nQ5oHZiWrYJ0yGOHc47C9VdlwcDdJpEBcJeZo85csinMtqhnYqj3suy+SatKs\nTFbWlMng+N5oGnaNCPNgqdOpgBcb5kkLQVlMNn3XVPNzkpBaylyQNEGHXkvr\nG6HhEMyJMcmLTsfYiJWqLxsRCK/3+GZs91NyZFoXubZIq4iDZ1Tfq6MFkmuz\n95huuLg6qJ177sWdOFwj18o9wKw1RlhYSxoo32XBbYZR7xSO/u4jwtE7EY8M\nynOyONIAfKfIUnzYpXdXDoYoOFZBGkHMoJBxnagA2ie4nw3wyWsZfSW03GYz\nTSTq5CHpwjQanRxS+5E3U9LRF/FbAt/vDHCSRdtFqnW2ZlivwrffdXLUy8+r\nURfLiS44A+0TQNHuWz3HMUzHSMdYL2NjpEanXm0mbNs5upR0rrPpj64NU9mz\n3lvlEtJaUwukTkJp+l2pDO7Qd/naucmsdOL84NetNra9WsKJfIRHwsLnYWf9\nwmUqHo8vrgE1zXUm9tI8iml1vrTeKi+fNmRAg2SjupfILq+AESToU5OZspNb\n9EFH\r\n=HNQp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsQXfCkwMwjNRF/j/aOgsYCwkBr3SgKn51433pIIpSoAiBPT+PKKzkNIcNk9f4VvtPIbLjDpmj1NFqXUWT8bHW9wA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.ddf05c42.0_1599141230380_0.04999396347500307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-select","version":"0.19.0-canary.b889e6dc.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/floating-label":"=8.0.0-canary.911014711.0","@material/line-ripple":"=8.0.0-canary.911014711.0","@material/list":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-floating-label":"0.19.0-canary.b889e6dc.0","@material/mwc-icon":"0.19.0-canary.b889e6dc.0","@material/mwc-line-ripple":"0.19.0-canary.b889e6dc.0","@material/mwc-list":"0.19.0-canary.b889e6dc.0","@material/mwc-menu":"0.19.0-canary.b889e6dc.0","@material/mwc-notched-outline":"0.19.0-canary.b889e6dc.0","@material/select":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+wnMtNlW9aIov445ugufwow8yrjwsvA4DDKjwmxoXOfon/cqxMC+QB3EMv2ebVB4vknKBHz3c+uoAs+fWuweQw==","shasum":"b982ef9195278c6ab8e939e65558c19550201e78","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.b889e6dc.0.tgz","fileCount":13,"unpackedSize":199349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPm3CRA9TVsSAnZWagAAuSYQAJdo86CQ5upC79DQo1sK\ncAxFEpRxS7HO30OEIoISzJ44oDjRRYlFvMnWesDwlogFzIZEWwvVgP2hGyiz\nXs2z6rbHMeh7jQzEJb3GbLPLOWnP7uBNXolWMM7fVPiW/0oQx4L0CpjLwD/z\nvWPow72tmlegOOz1k/wqFg6y69IcVOri+QjHQW8oGAOofzIIHYpn4s+Jd7LM\n/Wt3NNUZ45MSrTYzrPnCe0op0fKqL/uK+3DWpMpVjguNBTw+CdLME8qEYhTj\nBJYivllkQngIkbPD2ALOGXP0+XW3eCh3FY8TLQ9L7VIfxKOZXHuyTM7LCCBP\ndUjlvTdSHanNzotAszHPJv49IaE9G2l3HQzkZG5Cqw1RCav06KZIA7DNmiw6\nzRTKDjR1ulxc3XC3NH5E4VbxPcmFqB//y4Ubetjh8G2RFwRRopyv1xNh5YuC\nuHBohHaISFa6BEHDZrzJC6nKlaJgaywvWO7ZoSwCCfmDX+9qNAa+quaksddp\nHaGhylN8vvtdPv3iSKD1ncp+v0RkKfA5W8SwQ8qemVqLvmL9fdGA9irBjlkk\n7YflQEbs1KD3rrkLGNsVZ57Yo4BH+Irh4svEbA2MlMYuo7rIpkOBF9N3dLZb\nmXp8P0RwAYRO7A5j+DBDQn7CqCV5IgotO20Stn79IYsS1xQBJXEEmzvUSBK5\nMpSQ\r\n=7puk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdNwJXJM5LHlLVyvNGcZRa9eiPCxGlHGdb4CEJ5y4AXwIgAdGdrE5WD81ze+9r6JKsllOks4Cvqcv/HyeTSQRCNgM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.b889e6dc.0_1599142327003_0.26780505565761903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-select","version":"0.19.0-canary.aabeceb0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/floating-label":"=8.0.0-canary.911014711.0","@material/line-ripple":"=8.0.0-canary.911014711.0","@material/list":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-floating-label":"0.19.0-canary.aabeceb0.0","@material/mwc-icon":"0.19.0-canary.aabeceb0.0","@material/mwc-line-ripple":"0.19.0-canary.aabeceb0.0","@material/mwc-list":"0.19.0-canary.aabeceb0.0","@material/mwc-menu":"0.19.0-canary.aabeceb0.0","@material/mwc-notched-outline":"0.19.0-canary.aabeceb0.0","@material/select":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2YogJsnbrcwo7s/jOC/Q2VGe4KuwHhOagho/pTssMMiNujl8ARFB5Kxqpb2R8WjO8AaeTiRX/mVwA+qmojh4Cw==","shasum":"5d198ea760b5476a35bb96d99c53655d9bb6053f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.aabeceb0.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUrYCRA9TVsSAnZWagAA+jcP/1VuaaV427RU7L70hdcb\n941D4v20rWyLKH6+Wkzxuy/3p0C4aLlpiFjjz6E+6xYYkhch7mCDJw5mLCrT\nwXwCHqzMvSVPWoMJYt3/TpoYyLHdQ1mAz5GyN/PJFksYuUGIagMEhUI9RorY\neHlicMDTT5tJZWXHSsxImRNXnWDw10rH45GSqrXpdIWzttRM2hXGL+m910Fo\npux5TdD/1/ZKvGr5SK5E4Cx28bTYCC6GP3kagxNnn0f3JgusdkkofQMTNO54\n3mL3ZgiHSCyjCkr7Lkq+xkb8lSbmdSBLb0PyUhQ0VGvOUp3HtJvTe4JLdSvJ\ne6wijmyToycJGRlWlG4Zlm4FCHYUi9EgkWBvRHVVzLXgW4WUGfnEhwk7FxSv\nVawJUiLhATWEAasQynCRAbD2K4ZPVf371GSZM7aoK9fLSJiida2okjv9eMMQ\nI8JFAMxDIhKB79RU5xxodxQIMj/Qy/rzjPuiqNhQEvrgc/rIJ/y85GMvepqJ\n9frcVowS+64Tk0v9QUMJ1t+6d4oHGoU1dMLRzhwt5ai3KOxOnj/f9h2tGTll\n1rYbKMKiMhNq5GrK1g5xbxYVj/kShu8pbX/9Fyooht4voGS8MJ0lvwvezBFZ\n/v0cKs8W7GNSEzB8Pp4+7YrH7V5bhWSaDdXWL6U//oX1PzXbK826JUkR4I3y\nTaGs\r\n=1cOH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHtiothfD+gos1Ux4hoYuf3trO/PLzI9+Flo2Wqm5auIAiEAzGkSpl7FOfAFR4lE0PVgKTafAVBCVaD7s4wwpiaAiqA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.aabeceb0.0_1599163095810_0.45423092449591396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-select","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/floating-label":"=8.0.0-canary.911014711.0","@material/line-ripple":"=8.0.0-canary.911014711.0","@material/list":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-floating-label":"0.19.0-canary.d8cca3a6.0","@material/mwc-icon":"0.19.0-canary.d8cca3a6.0","@material/mwc-line-ripple":"0.19.0-canary.d8cca3a6.0","@material/mwc-list":"0.19.0-canary.d8cca3a6.0","@material/mwc-menu":"0.19.0-canary.d8cca3a6.0","@material/mwc-notched-outline":"0.19.0-canary.d8cca3a6.0","@material/select":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rdizqCjVpQ2FvC6RiO7itavr5voh3fU0W+Rz94Texw2Lg5HIxiH68zix1Iytck1MR415776DTbd//7QFrZgbyg==","shasum":"dcc962e632cc76bcfa9a29310730172fbc152e04","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.d8cca3a6.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWDgCRA9TVsSAnZWagAANi4P/R9aiCTvQMrIOWNk9k3n\ntB1L3RUxveEUCUVtvRc3IASi3kdFYB6ws+xe4U27iyidyU7uooj5nN3WXNpm\nY7G/ndKfRiXxvUv3sqAAHGNIBfj7/RUgtP/ZlyRGANEKTKxpeL11OHcz+SON\nWFN41Nso4C/JaCoUW0/4IrePQu1IXobCY3o1/Ek6EuOzzqtQRN0xbfKda8BI\nAQ+Trb+zh69GTwvBb+9Vaq28SFEoR8k1XPc2K8hYhtFW9ms7WB29+ATPfdfz\nZx1XtLa4ynndT++ADb3Wu9sKTeieGQcLjvNIxtYRC0TJ6oDWQf/PfsHyXB4m\nRIrEGHfEgvKyMJckppy9syeN7N/3N9Boqb+bRPy6HYUXhe7DO/qImlLe4sv0\nSSI15QYluJs6dVwxOrbZ6byyfJPerx+wxNYsnYQMeWfDy+QHYXiamf9z/K19\nwBuPnLmDFliF/V04m4j1sc6hc9Ko8r/EmDqXR6/+8GyXF9qQQC4TyhNkxx1A\nBOt9wUdIcWKKwijsWCGw4lGIwMhhCLlG5X/PLXm5WK5r3c8j2DSOiVS8K+mF\nOocHO/eqY0fsyB9+Ww4MTpiw1BVNJ8JGyNbEQkPxyMSadu8RGpvdwOmwGF6S\nloK7sOLAPl84upK2GRgyH2f6VbSQzSSLhnVcU7rRm7+o7RmVEmkxVRZ0gDTW\nqsAs\r\n=uBa+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBzM3epTiyKo8B/rV3HL8/KkxQvzDRtXuG75LYT/4GIAiEAxfRJVJ2OzXysp28KByywyoYRmj5WDPhzdmqB54utdXU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.d8cca3a6.0_1599168735656_0.1659912538136168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-select","version":"0.19.0-canary.26d34b2e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-floating-label":"0.19.0-canary.26d34b2e.0","@material/mwc-icon":"0.19.0-canary.26d34b2e.0","@material/mwc-line-ripple":"0.19.0-canary.26d34b2e.0","@material/mwc-list":"0.19.0-canary.26d34b2e.0","@material/mwc-menu":"0.19.0-canary.26d34b2e.0","@material/mwc-notched-outline":"0.19.0-canary.26d34b2e.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pFlobj2KsFvIfk2f1ajvkd/OTymRsKNLoPP8eEEmXD68UZ4IwVDOg2BIfVsAprqJNRib/5UI2+jWzzrSCTe2NA==","shasum":"c56fd875deec6aba72d08217da6cca97e921837d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.26d34b2e.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWbXCRA9TVsSAnZWagAAT8kP/iMYlxa7vCXXx/Qwt2Gl\nlmxKMbMnC7h2PA9Gxjyijo+8AKVkzIGYCofAOc31Zp9+9t8jMMFCfNUp9yaD\niOgpIeyb/cV2IVU7XvtXcXRB5TPDT8yhRlkkEPTMUYOhXdlhF/6pDdWTQYGg\n6UeKM3UO5BpJstDYN4WbZNmSt6cbdBqzGU78oeClGG8heotIQTCC0k4J2aVZ\nuetSkoGSScyYJcDfBo+Fz8pa6iztH8CNTHB/bosCiJy3KYydU4NEqfAGR8gk\nSdXWGjAWw38U+mUydTsyiQ4e/+c0Krf7Rvzjjyxr7O76XkyNS+x2Mt8BeoUY\n+yLK2gP08MeSxgoCSjdL+njqLd1u6DEV+liXPtjJMlYUC2L5F1Qj7Aq5bC+p\nup+V1Pj122699GWJoitEg+ENQzPyOgBGvRfVxkeZ5Ick5j+XqsEPJ/FmgHFb\ne9LpHJ4TOPsJy95QbgONjzSW77GLf2CbPTYhw7oWUSHMmyfqCXZQyuxSJF0W\n8kRRAqP06rlS1p06mOTFV5CHdxKS2fJNhO/OOI0N9al8ozrmWzjTCVpC67YX\nLVuijbSOPrhmMIUyFaDa7RAt4B1/yQJMK8vYVRgKGmAm+vxWCewn2Sy7KSdP\nev7Sv0bSNlNmLiGDhNV+AzxRKh+XVEAr6nMAhQ6cuya2AiRpc8g3M1XBQlCi\nwAXn\r\n=rm35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp+0UwDe8ICrnQgHLTIVRXkmEzWlXbyeI3zgLdNu2ApwIgG8ASVby5hM3jiYBv32V0UaNwEVbAev9XEcOCVdFLNtM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.26d34b2e.0_1599170263227_0.997522070280499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-select","version":"0.19.0-canary.a1c44494.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-floating-label":"0.19.0-canary.a1c44494.0","@material/mwc-icon":"0.19.0-canary.a1c44494.0","@material/mwc-line-ripple":"0.19.0-canary.a1c44494.0","@material/mwc-list":"0.19.0-canary.a1c44494.0","@material/mwc-menu":"0.19.0-canary.a1c44494.0","@material/mwc-notched-outline":"0.19.0-canary.a1c44494.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OmBQ+Nl9d9BRtrSoUJkgFjzVkn48A2edDIsRLsaCZeoH18VPePohHkRi6y19HVzIhuZ75yaIo/iCICQAodcKzQ==","shasum":"4ab59709c05167f0e998b967acc694da3be5e61d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.a1c44494.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVJUCRA9TVsSAnZWagAAhm0P/0F99IIc8Wi5TOFbGtTy\n5/N1CpNOxtlqZJM/eG4i1hutacXfWRG2JTE5ufyAkQY1rcYRFJVucToR75US\nKHk55e6x7Bqou1OrkxC7VCOj5IpueJK/F3dPyab/9LxXNVOptqbBouaE0WvT\n8jJWUS5H1MYvl02DAqFzZe9+sYXluNzIyEa/aIRj3tjirKrS4pGwbWoo736b\n19RqMVoH3hB0DOh/ERRDfBjFDoBeClNZyhAEcOw6l7wOHmtNHA5IRjjIczvG\nD1H3cWjh8/GBUHy3DiVJBNkLkpfxUHO9ubDS73E+ujqya795Nqvh8nbQlg0s\niH4pfIHtBCcgDUdKfNCHeaC8lcxW7RVSrFm0l8QSKVGJI3KWHmCiAiFnB8wV\nTkHeHrAknQSHpcUa0J8LE5xJYghzF5KAWhr61fc5pMn9Gb/JFD8QXWji2PHy\nLcmNlYDBBqdpSCxKzbcT7oUd/xw60wM1oJQJrZf+266NNtP31Bqx2yfb2W2c\nsdeqf6oRb3cWjSjy8nQaGITIF57iykeZCH8NhyDDQzgyelLe2FrzRadp8560\n43Lx2Cwdheh60SgAn+Lb+JjDLq9zb7y6cJb6d/R55IBOJlp8Q9r0oT9KdpKf\nSiViN2UNMqqtNW70sa3mEk5Vw3RXiVt35XxpymD/3mO3D1HBgNjXvs4yWwOP\ngdaQ\r\n=vYHx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCeQv68mcqLmXuWirxsbkEj21eSz4cHqA0ME090VzLzQIgFMn7sDuq6xW5jVdHZfh79OJjs4F2od2BHlUNA0ljaS8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.a1c44494.0_1599689300311_0.04623180942690164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-select","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-floating-label":"0.19.0-canary.be1cd1e9.0","@material/mwc-icon":"0.19.0-canary.be1cd1e9.0","@material/mwc-line-ripple":"0.19.0-canary.be1cd1e9.0","@material/mwc-list":"0.19.0-canary.be1cd1e9.0","@material/mwc-menu":"0.19.0-canary.be1cd1e9.0","@material/mwc-notched-outline":"0.19.0-canary.be1cd1e9.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9p73OKymRmulgUkV3iQH/43a6mHjBbmocuiAiPnkIC96rfZDlxwRR2sCVNRAaXRzkfhy9nqqztHVB3BHO77Lfg==","shasum":"a7b139b2137953f7f1cb54175489c6f625fd3a3b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.be1cd1e9.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWldNCRA9TVsSAnZWagAA/oYQAIG6eNxr665vseuNL994\n7SIF9KqH8h8gFzvciq1K75UIw5PC5V/a8PI8St7Cyyrt/qa1DXmvyQ0LPLfr\nu/4doSbpIRcNvQWUKYC5HnvvmfdiHN/LGiwQC4nVkYqXlDefZKYInpRddwDK\niJwPmuQ+OQTRby95xG3aAEmi+X7DT8Vafz8FrJVq/Vo69Xe+0JGA8AOj+XKD\n25EHeWFeTLU1qYP+5w/rSDik925ACwk29wGYpcTl73/MELJ6CcnVbMBNmllt\npcwBL3eRbvhsNGqo19mUqDKZl0fEJFE1qx40+zS5kAWEtG9ugYMXMZ05O91W\n+Y03RcVV7I3bng6aaCO7Er9heQDEtwpgGLkXVOGPybCyw0limPrgupWxifJG\nmebO5jYkIG2b4dqcQH2+24bHM2NbqoAambbFlKr1V2VbOnx5xIeMd66eF7hr\nr2Ev3YOtfQ8W2H0dQNFzXWSFhCKBzt6gkRx2/HBZckNsznN/Z443GT2h+a18\nJd4eg+l2qStEfaBN6zHxkZz6KpmxOiJm3BAxtHO0wxutUEVMRYuUNEO9W4iW\ncDFUhHPTFyBUkdp7pRw8V0/58vMmFyJ+KRn/1MnqnwVDnTKUuhvDgPORRp4i\n26KBBmAe51Z2EdpebSqVqwzrwWs+0RnlExmk4YZi1N6zGT0AwcvqVkPwqiE+\ntJyW\r\n=GB61\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRgya8DVFsO2rqfVxVy31WBYooPcl/mrxvCKfkqXd/bAIgfPdRO/fae2DVfJxL1tk9coKRit/ASYHcVkv11b0zxm8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.be1cd1e9.0_1599756108604_0.5308630684323108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-select","version":"0.19.0-canary.f094c0ce.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-floating-label":"0.19.0-canary.f094c0ce.0","@material/mwc-icon":"0.19.0-canary.f094c0ce.0","@material/mwc-line-ripple":"0.19.0-canary.f094c0ce.0","@material/mwc-list":"0.19.0-canary.f094c0ce.0","@material/mwc-menu":"0.19.0-canary.f094c0ce.0","@material/mwc-notched-outline":"0.19.0-canary.f094c0ce.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-u0zo901q85/4Y6LFqX73onSHcl4NNX06qB5Tm7UJ96K5t9b4lrq7eLoqqlfksgGXpzdLllQSGe/lP34NaHXCYQ==","shasum":"1ab78e61eb76d0892ae921288595ba2ffdc3653c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.f094c0ce.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQ4CRA9TVsSAnZWagAAihUP/35qOQ2QZ71ZWz8lubzz\nyF8hHYPmtbeughmk87pGQf6p0YVpz/dvMND/6aSASHxaTvepjPml9iuDiJI9\nQpAK1juu4Ah+cnQk1DLXjyiUrVJ7mfw0262HOrt9kE6DmLn4AVVubbChDptp\ntR3RrWanfvlvyReYymtZ6wGlhzDde2EMHwZ4dixxI1kgZHT8Jq13h6DLLHqZ\nwZfF2HpVpzGeQy4t3aST3sDpZNtnRazshPvjG4mbYOr8jdqb0JBmODxA+l7J\nFBO1woq1D1JB4+AWVGk7eNXovgWs4NeKJfjuPiRj15aihPbdbIMqNXzBYPga\nmyptpOvSRh2bfVQtHYqIVwo18jRAdAzDVoyJYVr5x1bgfoKsnlHtWlANwUCn\nn9hgLjzmWYC4uFGIMVPKPWKxZJWOkwR1/1SFfEPhHwEHkWMfqaQ4Q7JqLOhu\nvcJ9y6neGPzIkvnKxjjwlkypyFG22LGapfWX/qpOrBL0pBMUiWQvNqNuj3yL\nHX2EATPyLAQokTidiz7UI8Xe77j91ui+3HW2bMlMAXoc0JlHn5BGOshDSL2C\nSbjqJEfWKq/pQ+qTTQwix77rpRcCqaAc7NsyOMkCUTYK5Mg+GkFrEDNi7PNp\nJaDcGGj2KCdoA4gGOT3yrPeG4zLpCoUj9nMpUKN066RmRw1lqbLYh0SgGydm\nLHJD\r\n=5SXb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwwfxsgaJiBR2JXAIBum5RmrdLP5blXc1nNtNgMbMFwAIhAK1ggYVL/jO/8jn5foafIhs7xlfvE9VOw677QewhnaKh"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.f094c0ce.0_1599759416010_0.10653046889582796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-select","version":"0.19.0-canary.c1261e7d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-floating-label":"0.19.0-canary.c1261e7d.0","@material/mwc-icon":"0.19.0-canary.c1261e7d.0","@material/mwc-line-ripple":"0.19.0-canary.c1261e7d.0","@material/mwc-list":"0.19.0-canary.c1261e7d.0","@material/mwc-menu":"0.19.0-canary.c1261e7d.0","@material/mwc-notched-outline":"0.19.0-canary.c1261e7d.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZLNWaDqH2NM7guasLHJ1sfoG3HcydVu5UlPZXUgKz4P4hHo0j95GG6LpC/xNKDIpBCE1iuuH3C6bXgvcJU/rvQ==","shasum":"d7809d893dad11304156d2037d20571fadda6ce6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.c1261e7d.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuB+CRA9TVsSAnZWagAAhDgP/0mY7Pp25kQvnkiRWIN5\nDFb/5Ovn79+lzzJV7u3o+Zy5VVSqEC7dIHr3FMdsIToHxXExvIYPCSl+Sz03\nZQHjS9wzTlThKHx25+3lpTXxSEiTSpEIH6KV8izAuC7tBnohmGG12aaxZEvl\nMFsWPzzmDO55HQSBoVbKhA3RDLY5qOTquo4q+Y0vaw13ZrJ5S5bizB5fYUud\nx3rY1Z64co0HiG54CHi+BYfu+aM0/qJ0Nw5JiNkkyxAjU1S/90//MclwZNuU\nqMxNf0oK4+gD+/y/od7TexVMKRcSDEKPDQ+zqbqCOuk5NjunCKo680FU0fxO\nENEFDA5WXKwzLigesYIYS2hfRr3K9YkONwEBf5lH33DvU8S646BfTwUQXdgk\nhXYaQ7QwWzuE8nWzlEo/OcBsnoKBaL2H/t16F8M2BhPcQ9I3snn65rupD/ge\nXfrzTgr0sus3fBXY+3r591aJOEm0jxl0TDZ1e0AWPSYSFrNa75fuC/RYgxxR\n72HYs4eHb6lzpRqwgrkgoWYy+3notj6Vgz/+CVwWcKDIS4FGk5jeGR99FZZB\n7MgB7dShc3lPpySP2v0wXdXfCAqizOdZCWLQqrI/semj6cbXTyt9JEiLCa6t\neqaxuAxh/s48jd1gh0G9LjmXRYdp1G1bCIurLELIxUSeS+LI05v5N1uJO7Et\nYRTp\r\n=bZR5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHs4iLAKX33Uv7XzQsbEMGCjkiL5uTuYJFSKb4q+4VpAiEA2+kihBFPZRlqCGf+kKgcjJ9vLU+eir6N8HJKM0LAdVo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.c1261e7d.0_1599791230187_0.038666323549835235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-select","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-floating-label":"0.19.0-canary.9b39ed1e.0","@material/mwc-icon":"0.19.0-canary.9b39ed1e.0","@material/mwc-line-ripple":"0.19.0-canary.9b39ed1e.0","@material/mwc-list":"0.19.0-canary.9b39ed1e.0","@material/mwc-menu":"0.19.0-canary.9b39ed1e.0","@material/mwc-notched-outline":"0.19.0-canary.9b39ed1e.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6zByLmqDSbwrY8DK7PZ5HHHXN4CinBDJmBzRaggFKVhGlAF/42zek1aZeIiIYmXpOVPzBFKM+y6g4WmkXj8IJw==","shasum":"e5572ecfdf87e8e170fcb9ef7dec8067a4d01f04","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.9b39ed1e.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCvCRA9TVsSAnZWagAAIRcP/jdxZAkV21g/MR0kerLw\n7VGdlPyENGBlu69lpqjaDPfgDXwAldGyj4yKBBKzMfUX837dIcFBBJH+Pgy6\nLNpCIqkyiDra/ceDT4HBdgem2XS1nauHHSKppBoUypXpIWlbXI00p9griYmC\n6Es2JOXVLd5vwSIwz7jSJ5yuCLIqdslQTWGch5Jx6crl2N3VsqvXraCOb9it\n+t6qhoZMWMS/Tu+sQGo2LgjV2BJkVc6QXTmYQz3tYIx87kiMEzJ5N7RXri2u\nfsCpEJe1kH0WR69InUBBhTMhl174fwMdf6r7toJZnXovmjAh0hBG7b6SNvR7\ndjOnRg2U3sbS4c856D5um1e4JXjpxaSHN8M73CLORH+1HgOz46l5PQ9oiwkY\n+krT1MWCcwf3orj0e+ArgnIhOvFJmVarRmeaBSvWXjPLnNKgf3B3jb4FzcN0\nVH0aiBZV0rUXetPAq+S3NuJrI91WnZ4t/1fhav9yYsstFQWf0L2bGeJJ+D9u\nXRxvk7hVpfLQnxhGg5yutfpW9YVIiaN91Gb7LC3vCQo77y/u1lqzS4B9QTsQ\nwObbI9TKUHQGih905BN4ikJl0V4qiYTn0wrQtpBJNPxY0k5wagYACz5cvV2h\nxQ0QBYFsTuW51vEm/K2gnnEt/sUAwXbzAQiRsjotcYVd4ciuQZoQhHjPXCrF\nN5R3\r\n=7efB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCEhgHX0fDKEojqb0gFIkmM2L7/X0u/NCvBCG1ldX5rAIhAIHBQJ06gqGRKRf+Gzej35r+PRv6pCqcTniOQBEK2lKH"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.9b39ed1e.0_1599791278722_0.39713058533459034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-select","version":"0.19.0-canary.e67214b3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-floating-label":"0.19.0-canary.e67214b3.0","@material/mwc-icon":"0.19.0-canary.e67214b3.0","@material/mwc-line-ripple":"0.19.0-canary.e67214b3.0","@material/mwc-list":"0.19.0-canary.e67214b3.0","@material/mwc-menu":"0.19.0-canary.e67214b3.0","@material/mwc-notched-outline":"0.19.0-canary.e67214b3.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4E4b9Pa8T/3+Pq1tM2zLddlA2pH0G1y1MTsgK+L6YBUeQownS3FHvEQ7ACUBZg0BPzV2bP8g2+PdMLAi76vy8g==","shasum":"904a9e64fa6f212cfbd4646646ade907429cc935","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.e67214b3.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGxCRA9TVsSAnZWagAAk8kP/3xQPgTgMVl69fhIy7/p\nS+5oT95ZROPXoo9dhF942jIQuhNVt8mZSIcYz0E8bmTOYjV1vCCrpU9ArBbK\nLXH/xRJYDDvffHImeSFr+j/IvruyIVz+pHcZ12fPpAaB2f9nITiKohdtSQHt\nfF3dasCQ+0U2CRyfu+ZpSElCv7RGG/b3HjFEObiOYe4UeB2i055U8umPiVRm\nMAAgR3iesQXWEyj3f4sQfN5kYehpgc/zPJo3XC2mntuJuLGAkVllNoEDZVkx\nfGue8eWh9D7D5+fRLy0Fy1N5ObgjXuV5lFDStM/MVciV2hPRcPdMAhm9WunC\nADIiIOgjvwg14xd9jGNlyFUTxQdjqLAdKXvOv92UM1aTo5LuciJUx2G/AYh6\nRSVP4U2i0CDse5KFe9KyjCbizyNF622vGSOJApLLvLtgGDhJCHBipLXBz51N\nO8e2UBn9BC4TsX8//LcGk+9pFc5GdFLW2B0fpx2Q3FZh0PChS5MP9V/3HJyT\nDBpUTHSCwCp9KN/6O+WoCHrEygYmZPahFNh8oCzo+IkNYHywIKAHTgGzR1Nz\nLj5HNWPQVYNRAg3qS2C7nBoxKGuBsZrP56AAgLMZsS/bMIZ2n/rw/JtSi8zX\nZa8aod4ZIxwItPqyzqRzDCLpQn81U+0Xm6XcEOOSTP0LWfqXaprQ6++tC11b\nVhXj\r\n=xcq9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5M9bWYLVMjCiSNkjU+G/obOvRr2CwJVfg8qU5HxyJ9gIgAbPuxesTQ7AAfN4tYZeukpWjUQ0Y3cxHyB356q1WJcU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.e67214b3.0_1599791537028_0.6339311512733448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-select","version":"0.19.0-canary.36f5da28.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-floating-label":"0.19.0-canary.36f5da28.0","@material/mwc-icon":"0.19.0-canary.36f5da28.0","@material/mwc-line-ripple":"0.19.0-canary.36f5da28.0","@material/mwc-list":"0.19.0-canary.36f5da28.0","@material/mwc-menu":"0.19.0-canary.36f5da28.0","@material/mwc-notched-outline":"0.19.0-canary.36f5da28.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+8Dk7DjPkT6D3aaUSbX4qm5GbF+60JA18IORPNh7AWVkgsGi5PhxusQIpjavayMdQHDwoxpGkeqAGwNn50yfjA==","shasum":"84e200ea7f8f53b784b8e40d22f1939bdb7cbf67","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.36f5da28.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuJUCRA9TVsSAnZWagAAM0MQAJqEcDG49duPA0SDXr+0\noGOfgm+jOZnLzA/1WgOBgzrSV2ylaUGSSwYz1zDCEhmD6g7zZaisw0fqzayM\n1AUMbSs9kAyaHBwQXVakkivi8tWaRYJnrKh4SmWn9ScV0BjVOtfvNQVXHpKL\nO5Oy4PF/B4w1Ptda5jekLM6BxbBoJNhsAOdkWvQqthyJYBBtCm9pW843bKYm\nX4UZp+FLA/adTz6MEF6w9Pe0bLhfGSMLCOVqac2jNDDEwN5bExQ2YMo44dTi\nmfIpOpcExhNrFgyswhmuUrTx8cJpxlQdMkQQYz7XCA+nuocREykBcJ5Xgl4D\nmqIk9tct5llQqVDpHlSYqbvBJqtEenWuHwGCipvZjEATnscM/AjBwe/iKfxP\n0Pmleer3JmkWgnm3sPWEpk84gu2eAT9tcs57z9PP226Xww8JTUFOAnBSeLJt\nL0DMv//iOu+5QmVocCpTiOHlBVxsSJix6Ur+Q+Dcp0Ro8/10xzi9MQsIZ1Pn\n8JKGrjyqEfIOqRODm0F99fNYh9dFtcehZKCq7vhGU6DhGuRp+lqlBNyD7Vca\nT2Uy09Dy9hl1jcOz24cBRMu6Mvx3j2OWb7te3uw7vVuHPBWOBqrdZyf8/Xrh\n1zU3UBFSMGngfkTpUSBynGdGdmPZdGxVhsazOIZdNnIqtmzgesr37u2JZ2UA\nFuQG\r\n=s3zz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXsytKhYYwiI5/K/0/r4MOk0YDZpiX9+5uiKvZ5SbPBAiBsu/SZR5sn4BZ3qpGxGtxI7iD5Mo7baZKyvk1HcNaT7g=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.36f5da28.0_1599791700528_0.46278114100236123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-select","version":"0.19.0-canary.3babab12.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-floating-label":"0.19.0-canary.3babab12.0","@material/mwc-icon":"0.19.0-canary.3babab12.0","@material/mwc-line-ripple":"0.19.0-canary.3babab12.0","@material/mwc-list":"0.19.0-canary.3babab12.0","@material/mwc-menu":"0.19.0-canary.3babab12.0","@material/mwc-notched-outline":"0.19.0-canary.3babab12.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7UljRaCZdZ4ytwHuC0oD7V6Iw1/vq+w9UgLwsaFOpCTIBdxijG0Wl1619jLX373VJB2jEzlbFdJItdH+A2HBKA==","shasum":"6c38542eb25003c5b984695876e8c6c10d8739a2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.3babab12.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuMWCRA9TVsSAnZWagAAAQ8QAIWj85B6mwnBboHfid5o\nhgy+4ZimGklyd5D6cO2KzZ2p2u4uNBUCStGqEA7gpmHf7AMD/IZT85KJK3Jr\njxO3YW2Y9k0lfBUq/U3Yum0RnS9c4Hh2VMOXemeYsAU5XEpgNvQt1rmKLsqG\ntqrMOqWk5KZmRlfEPocmWdQbTP0dF3P1bjBIStPZrD/jK0aMfVG7GYa5hbwW\nVFJX90+TCy/A7zRkMxDxdfYly7Kz+cgsenL3x7nA46Jc0D/CwrKRysjiER4X\nEQvdIqR3lixASfUtg4NX6eyZqpeyQIbDjLzhZIdhMPheS/1pP3wjNbNRc73O\nKdY+UZLp6Nz9gZ3U1NJGN4JRLjcS/aXKXaWqspC6bdP93rV2RLolgyIm38ua\nHixS6N8g66rROKCXoo+LV+ZTocE+KyenipXr4ImSxpA0AnZ+fQEEsd/Ru+Wc\npNW98+eeldTtFz7nXPQmn/c+okAMsKQEA1vTeZo8A8dfd+8CbCCPKWFwkZ5e\njQ4F2Vux5QBvJCbg/2LLNGSgFjhMS+opwqKI7cvQz7LYVRA+TJadxz7JFvg3\n+vAnveBiBHc/aGzl2S4tpHVe8ZmS16dEXrnjTW5gZpYfsi6KMzFn1dA2IHDN\nSgevyQXolLibPeglWb/kv69NKnyBCFm0+J1iwIsjLTiBG7zCt/Zw+cohr8d2\nVb/+\r\n=PRAF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDhGf5ni+N4Wy7lC4UR+LSCsvtrZyp1Ob/ZJTYScxvp1AiABGmm/6PRHDP/ka1eaSn9lYc2uluqbMo5Hr62QdGCQUg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.3babab12.0_1599791893801_0.9045978916257662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-select","version":"0.19.0-canary.a4481e6f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-floating-label":"0.19.0-canary.a4481e6f.0","@material/mwc-icon":"0.19.0-canary.a4481e6f.0","@material/mwc-line-ripple":"0.19.0-canary.a4481e6f.0","@material/mwc-list":"0.19.0-canary.a4481e6f.0","@material/mwc-menu":"0.19.0-canary.a4481e6f.0","@material/mwc-notched-outline":"0.19.0-canary.a4481e6f.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tz51myQf2OAYNKOeO1RsghZMxyNTHpZKAGzVROumjsRnwQpFLwOdLsnqwVGC232IyXdXDjr0HnAxqH6IyG0CeQ==","shasum":"cfdc5a1b1450b49504a55d8d8c256c7bbf3c1660","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.a4481e6f.0.tgz","fileCount":13,"unpackedSize":199438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuXbCRA9TVsSAnZWagAAKQEP/A3L1UwMa1F09thY0DY2\nWHU+hkhWh0Lld0B7Pd4eo0/KRbDSCGmc9u4njIeMzB0gxxyeHX7LO3+aVk75\nt93riCLuZ38edTdY37M/Xxt+l6UAsfo/nRdnepTpU3PEp9l0aD22Vy694aL4\nZU+lGxxrvUm1HXIfqssCPaq+NTeWHu0+lFrLe73GEFVWSA6Zqsqa82XzaAZE\nYAR0WOufwvjbyx+KgJW4UDPFRB2LzNFODZyQRBt/hKByI+WtzSfd9/z0IlCQ\n9c5LlbgBT+qC9fMHEz/S4t3Mc3yZw2V2+8fLqswst1UHgUSn6vcpntqHJ5o2\nhKS/z5HrBQWrn/Bfh80kclrKx1VAL0mZv1VHkWXjJo5u/6iyuryWEXs6o0Nd\npeoinBIAVXCxrpAq0lhaEmcN55tXYQiJRjj5s0Rp0LmYp3URh/gyrCMxLo73\nRdJVuOV0jXzSDh1dzCoPqmmQNjd2xkOXYuJERgl3Ucd+oxZRcgw/l7AeyuSJ\nc6SPLsY9qyd8DxzT2VJc62PCDJ1ZdCRXV8mpVmJTXfDFtSCMfOoCkysvpBRS\nMb22BM7IJqQXDmt1WjEF0mF6qZCf70ePsnUsT9geRQoNh2Ih1JWzIvU1z9TG\nm6Y4fIN1ZvDK2Vw6RZ1GXs24sJUgWNo3bYQ7ZjZN7yWxiqDTv4m4OA802pXc\nk6MA\r\n=BumE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZ+hYvUTF7vdBBbqIchf9RTAygqIikmrZOaIWCHE6tbAiEA9zCisOUSt0I7dODSi20WzT9CN117e2+iU8SFIj1shvQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.a4481e6f.0_1599792603491_0.6002933332458831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-select","version":"0.19.0-canary.a9177836.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/floating-label":"=8.0.0-canary.744bfe5d8.0","@material/line-ripple":"=8.0.0-canary.744bfe5d8.0","@material/list":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-floating-label":"0.19.0-canary.a9177836.0","@material/mwc-icon":"0.19.0-canary.a9177836.0","@material/mwc-line-ripple":"0.19.0-canary.a9177836.0","@material/mwc-list":"0.19.0-canary.a9177836.0","@material/mwc-menu":"0.19.0-canary.a9177836.0","@material/mwc-notched-outline":"0.19.0-canary.a9177836.0","@material/select":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-X6sREK/6PneoL9lh9QDiPrtppz1rwR+VYCvyVXy+UEvFurMlZSQW2rnrTzbqKAYN0C9BaTyPWAluHAbQSBBPrw==","shasum":"d858481858cdaa2219ab704a036758dfd40fbcc5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.a9177836.0.tgz","fileCount":13,"unpackedSize":199606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7heCRA9TVsSAnZWagAAOtgP/jjYLWuNf58xo/+UsMy3\nVOaW4a7C+3H6F1Is9LysDfAt27AgCzcqGLYUDytbGcbAzc+OnTag1VQPXKpH\nGY5Xyw3lFeEDE/dVAMvQlBTHRNvXPalb4LFAT3SrLfXg8p7Hgvd5br8sp5+Z\n9KQk7tbcvGaivRDUbC1gafkpjpsLW4FFPEQJS8+0nhz7ceWQyH87U5HpKFJz\nPZfk35wN/T1uDtvNXT0q5a6c1JPX1M2JNV3ksoJvN5ST+IVV4s+4XWB5Cpva\nG15a0RMdXAnJ8dqf4eJWnT4UuF5afScCGbcsLRgsKQpUvUmcSKsSfLdYOwlU\nVUUpEvH4I7c7VfpMOcGWiHCIx3T7miIWjA8xakTvln7ksOI2FxIkDI0G7Xiu\ngwtLqFQ/n/mZTgU/W7j3842i1SFOSgqaBFrRHItVT+aZIimvyj3+C0vPNG2j\niKaZIz3c+QOJB9Ws+aCkzbG0zuFaO9bWzU81Tv63AYikHIOZgj2yVAUJqE/k\ntYEvSOMrF1fwQAKWibR1rf3cqZBEDyX6/lDgw7bGhCKUGnbSAniIVUMvemuM\nRAylKGEriOh2Jswf2/Gqh5cYpZI0b6C59trXwk0nSuuhWXNxWBX9LtiHxvRr\no8cx8uJNHLqJUrOKILRFrcKZnvIMtoW/C4t3pxpyNQ8pkjWt0DA9NeAUswFn\nJZS2\r\n=mn5I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHGZcgsq538CtDf0R27PAlCa82DmgiqE8y4wsXmscHHgIhANEUYpmYvZgPg9FZ4GmBNKht/cBzQWkt3NohHSwKsJA5"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.a9177836.0_1599846493988_0.3467400154749112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-select","version":"0.19.0-canary.b102a3c8.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/floating-label":"=8.0.0-canary.319bf66de.0","@material/line-ripple":"=8.0.0-canary.319bf66de.0","@material/list":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-floating-label":"0.19.0-canary.b102a3c8.0","@material/mwc-icon":"0.19.0-canary.b102a3c8.0","@material/mwc-line-ripple":"0.19.0-canary.b102a3c8.0","@material/mwc-list":"0.19.0-canary.b102a3c8.0","@material/mwc-menu":"0.19.0-canary.b102a3c8.0","@material/mwc-notched-outline":"0.19.0-canary.b102a3c8.0","@material/select":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6xIxSrzpKAYQIqmaRwYukXcCGCofpfaIBBgjXBZaw2zQrgcg+evo/zJDxE72kP5iB4BwOAqqBGwbv0ARjlsO0w==","shasum":"98a41966f020ecbaa7886355304a6bff9b085a7a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.b102a3c8.0.tgz","fileCount":13,"unpackedSize":199786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX88aCRA9TVsSAnZWagAAW6oQAKTTDpA+sMRaIWhtrNmP\nEa/rDJ7swfOXIi5FdtiyRWjmWBeyZ+NimDOjSVQVoL8ypOyz4K+0tJVhvLcx\n1UGMrFzuG0tl/r4pDuIRh8zhAJOmdado5+BZFYRdu3eCKPq7r0yVMd3oNLZT\nMI++32Sk3+zpLYAuHz8Q+6iXg25OhcaTkDwF6GJ69MJJKJzatUIViwGXYhgT\nLxYUyz3dRKGdg59nJ0MDCwoAT5k8zQ5z1zqGW/Z1aCuuGIWcOEqaV58EEZx9\noZpAAZQVRLsnTgFg/ao6TY89JbfLCcw+VqgWorwzEfsKDY0XZem0X+Sa/MPP\nDC31BiUMVZdGYmE9jWHn1XsrHEONET44hQZYmvgNjojjsl7Cm/7lvyHomoAd\nt1Z2E/93F+rFSfH3FDyIB6NKxU6tRA9WcRCl6k+j+lkTDx6UvtbQWe/yo+UA\noygHbFCidxdGsg82qH9gKEGEhW5Et4e3h+GEJfdJEI2QsXsP25qqz0rl4Jrx\nTVUifjEPQGbBAas9TmLpT1e4uzX7tkNVUvZlYUNlBZIUISsyZABSgCdVVbIb\nzY9zjcUDLzi85rBidedwwIaLTkjEIgjzAG6E0AE+Q191quT8jKJm9NaFli9e\nBJI4tNQJ5BXjfKepDIQ1h1PAjXbaH7TK0dQfnojD3SoAnYYuzEyL6KUE6OP3\nj745\r\n=Ha5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAEoYXcI8llN1LMWrFNMOcggq7p3tccrIXYW1+LAr4IKAiAPyrS9zu2x8eDJ1zRKm7OzrhmSRrJ8Ze6tOKooaHX74w=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.b102a3c8.0_1600114457778_0.8640995681624994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-select","version":"0.19.0-canary.a7fbc707.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/floating-label":"=8.0.0-canary.319bf66de.0","@material/line-ripple":"=8.0.0-canary.319bf66de.0","@material/list":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-floating-label":"0.19.0-canary.a7fbc707.0","@material/mwc-icon":"0.19.0-canary.a7fbc707.0","@material/mwc-line-ripple":"0.19.0-canary.a7fbc707.0","@material/mwc-list":"0.19.0-canary.a7fbc707.0","@material/mwc-menu":"0.19.0-canary.a7fbc707.0","@material/mwc-notched-outline":"0.19.0-canary.a7fbc707.0","@material/select":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2XkMrd0+6Qx/RZNzSNDxQdU/mCN8l44TusCTY5DbBD8UmqJGHcxVkvNQqA/xWyb9xmZc/IvR7V4D9Lx/BS9bYw==","shasum":"b2140c0fdfdace5eb9c9b60b12769c246412b6a4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.a7fbc707.0.tgz","fileCount":13,"unpackedSize":199786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOaOCRA9TVsSAnZWagAA8OgP/0dnYjPempVGcLsi83uU\nm1MX90fMuW0IINIz3aRf592erlwEXTDWzbPdbUjVijNk3LhtdCTNw0hZcDqY\naGRJlRSkhjwIlsfXBiV05iZxQkDe/kv8ZDByls/iy3EXmSOAriZryVe8CQPo\neInnwYIhY65IEds5Yt9hyfd6DiPXXNC4iSoD4lNJx9Gi72GtpttP6n7HF2Ap\nplT75rDhLGezDIp+f2YIvga+oihgt/oGvONApESWuqc4nIai6e2zkSFPcF0C\nrkdcgqvWNSdVADLaJSmPgtloeGpN1DZUynh/xMkl7BBH4UZwMdIPBoieenKh\nE5K7wfZXZ3YN8BtI0FuPEwkgWF409H3tF1Po8R3/UCfClIr1gQmV960afEh9\nAdxXRwnHXkCfbQKXQQFHA0RtT9nuEKfjWtk9wW/LgoGZinIbgHz/PTJDHK5u\nUft+m2Hiz51I3Gj1Ywf18+sLyMzTKPUVJDtq/MS/bTTMvaFESK5qN+sCduOO\ng7JQu0Ehqu+cl4I4+iUhDF9pWoBMRVheGXK3Rxc8wydChefaNerr2qVAIR78\nEu4v9ipaRtW8U0gAODrqVEwMbprxcvYxoUpTFCaEtUYf1r0b9qvqULMl3dzV\nwtgt2paylFOZNe+MYlBL5PMH0FHKG738dil5zRpipwvmq65YHbfznQJhg//R\n+RI9\r\n=SPY5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYwPrDFGup3YO59Jy0ZIhKT388wbqQRy4KMJ0F/dq7AAiBuaX2EWho1O+eKviPQ41yBXkpICg3y9SXSutcQq3wlVg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.a7fbc707.0_1600185997728_0.39443923103617173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-select","version":"0.19.0-canary.ed6b8660.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/floating-label":"=8.0.0-canary.319bf66de.0","@material/line-ripple":"=8.0.0-canary.319bf66de.0","@material/list":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-floating-label":"0.19.0-canary.ed6b8660.0","@material/mwc-icon":"0.19.0-canary.ed6b8660.0","@material/mwc-line-ripple":"0.19.0-canary.ed6b8660.0","@material/mwc-list":"0.19.0-canary.ed6b8660.0","@material/mwc-menu":"0.19.0-canary.ed6b8660.0","@material/mwc-notched-outline":"0.19.0-canary.ed6b8660.0","@material/select":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eVOfHjG5uefIBRATNq/E6/a9h6o624axkzWIJbAFsr1UMPnfq6BCsoumea3iVu9PJ0jGLpZDX/0Cg7r+RJHqUw==","shasum":"b67f78871d9b89ff835a536ccb6a850583526f9f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.ed6b8660.0.tgz","fileCount":13,"unpackedSize":199786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPkQCRA9TVsSAnZWagAAjwUQAIL5cCbd24XbTOyIQfxO\n9pEqBbwb2qMEUVCRun2NcYamyl/ZYkYHU9wxkHEqhbrblpALSEb30CpGgMZi\nfLgb/q3mTlVGkXH+APxLkLWY7UxsbkM+eoek37s9FPGIFLzSIe7tdj8Czap7\nTN1Xi+wONfmlAUChUVM7jxs0kINoiCcHr7OtAK06Ltly5qweHjSkdtZORTAK\n36RAXSchg5HYSZ1htWHD0risKKpJpi+tj4Vmox6zmpoJBlIbEEiSMa5QufV8\n/CGuTqfdNHkowVDHvGNArRAYeRV3IYPsnv7kXxqYKGlEPcSbzsLO+LBqhGxV\nqQVEwo4gIcJESY+dUrBVSPfXuBTrmy5o8KeHsxd0pep6dR9zInJgtHg4V4sY\n2aUgbjfoKz5F0yh5l3d8lsLHbdUc10kc5BPU86Afyx+ci8+THrqlxQg6wM+0\nOGq5ownNkm6s/0QOwUanVtmtNaHYMe1k2JzF52UQIfdrBulQn+hi+vDAINDe\nXejeF2/tjQNCeocz4/1GIIzDv2zw2sOdCotBFR6S8Vecy16NLwx0sL7sijTc\nxaZzznJaQ85/hKK7da1FsTMOAEMSzeg88MwLvNbr2wgmNmu1zLHLOs5f0dFb\nOsQ6d/bP8fMdeVZB1Qs5Jhn1xtGUUrtbpSFfDTfOO0buGdKZLN4oJ9rAAdvE\nzKH3\r\n=+5P/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZ0Jvz89qtV1T6oXvQcW21a1eNadMxcvfXMU7QEtNuNAiAX385UprlYO+hoys78WAEGCXEMcpDEi4MACqHx1Xzcrw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.ed6b8660.0_1600190736544_0.5681784030463914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-select","version":"0.19.0-canary.9c2331f5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/floating-label":"=8.0.0-canary.319bf66de.0","@material/line-ripple":"=8.0.0-canary.319bf66de.0","@material/list":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-floating-label":"0.19.0-canary.9c2331f5.0","@material/mwc-icon":"0.19.0-canary.9c2331f5.0","@material/mwc-line-ripple":"0.19.0-canary.9c2331f5.0","@material/mwc-list":"0.19.0-canary.9c2331f5.0","@material/mwc-menu":"0.19.0-canary.9c2331f5.0","@material/mwc-notched-outline":"0.19.0-canary.9c2331f5.0","@material/select":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8ybdQfxHAa5HG3GumjZ4+nTBbnQx6EGQpAXDN1LtpOlOTCMF79XVwKjah7esQYRSXZG56oYkNGd4begMByg7YA==","shasum":"1c9347ae61bf4106640e3aeae0a1e56c0413d231","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.9c2331f5.0.tgz","fileCount":13,"unpackedSize":199786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP7RCRA9TVsSAnZWagAA6SUQAJtKCqlBzdqlqX5CepWy\nCijIQdvcrT6IbX1oZuR2EseY9OweUB+NU1m1sCH0k/vY+PwPgE4kJxuw2/6E\nucnrcwySQf5/GRUNEzO4FigVnn6SUwTWf8+dMbXHgnxgwe5F06DI+yZF+i0i\nGRM+BNHKhcO1ZSOMO/iwMv9FuaKH+JUK9OmnSncm/ApGMGGMt6sRne6u4Ckd\naZyVyR1N9sVr8ypMGJfIqYdztN2bP7jSBxjjxuHlawAQKkmaXZxV/Mz1dXv7\nUOyjG9MorxtMqu04OPiNZ+N+zWZi90CRGDjdtLRINj+8n/PSuxXeMPkp7vhY\nJx8HsUW0Y1jrejyJusSnbxtZU5zR4eQeThIqa8FLN95pFu6WPNihrx/TbLX4\nvXrH1KrUc4B66NFpbq7CoaL5dwGYDVQnspUbUslLRuwsZ2XgtZd/aI3GcpYw\nMHNMe9StEUpSlC9kTLzBcI6wAnWdgpSKqOylirVGbW1UFKiZHVUdg/4j9D+o\nMEdVBoT0322pwfZ5Z0rzZiGjLFwKvXX2UPPn45lAb7/XwDvbEPz+BnhFldmV\nCkPs4wjPJIKtLUnFCspxnJCZ2C0Gyi/Oy101hUL6oqk8yDURkfKyETgOqlHz\nL23vE6xE+m+f7jI9+1vN71II8SAbLOAJp8HxIP4SYA6J8mbbEU/j9NtAJHce\ndw/Z\r\n=3YfD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFy+wytS/aS/5wL/kfzTKYTxcXE2QVdlIImknIV+dEz0AiEAiMzfRkvNoulwPMRJCLRWx48GGpEL/1aO3A5iT7RYMlM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.9c2331f5.0_1600192209498_0.17711996928816065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-select","version":"0.19.0-canary.63a5f088.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a831d4799.0","@material/floating-label":"=8.0.0-canary.a831d4799.0","@material/line-ripple":"=8.0.0-canary.a831d4799.0","@material/list":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-floating-label":"0.19.0-canary.63a5f088.0","@material/mwc-icon":"0.19.0-canary.63a5f088.0","@material/mwc-line-ripple":"0.19.0-canary.63a5f088.0","@material/mwc-list":"0.19.0-canary.63a5f088.0","@material/mwc-menu":"0.19.0-canary.63a5f088.0","@material/mwc-notched-outline":"0.19.0-canary.63a5f088.0","@material/select":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DVTj/yGPHK2P/b5/Bh23RIkKmwOlomreEjE0b0FAcaexhCwMvGXItfYr17ZxB/8H8I/JUI3wu5RsKHsDq/s9eA==","shasum":"5e7bc21881dcc3376b918870a1e99a7516f1a72c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.63a5f088.0.tgz","fileCount":13,"unpackedSize":199954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoXkCRA9TVsSAnZWagAAaooP/ji3wMIsvKttqfkyroqn\n9dB5usdvADiTAvQZHmias4Dxp4kT8yPzYKN+MHes6yzjlYWln8e9FtpyxZFd\n0TX2jWrSlGTfFx7rEl9bWuCHBd7ubvAf75mNUFPhYpoYpplD0T5MAumCe4yo\nUa8qoQhaPJWRUTsanIJ2zftdEcTi1VaTKZf86kJIpJYiQUgWuwLP3b79ffUX\nFNNBBYQXNzXd6+ThiYRRB4QL7CtVh9rHkQJDRPqL7KDl/68ZBHnmhFWa2PeD\nkz5Qkf9UW1jZX0+X6632QDFi9jCwU4nQrS1L/vWddCryXc/wx4UQGu8nnnK1\nQBbwaUsw/6Zd+r2ChEJF+Vray/qUtshAN+Q/oWQURQR1LWD3Owy0XpX6Pfpx\nvddDyok6Q9S/hHstpRhGA+EA8Yg2/Kb/lQZ/xsij8uA2xY1tZwiV2GlfbzBC\nB4GIt/i8IB1k/CQjdH+yzUyARFfzHe3DMT5jLitVSo84spbl0vlP9AsUzXCS\nlSQKQLteh98NCEH88quXwoAerRdHQ9HarMrZCp3GNfIg2gJIIyvBhJOkFClW\nucsLx4RqXyh4cEpkgFWIphlIiBscwFh2Y/86q6WWgBqWgbp/2QhnXjCuy2Y6\nsV/uLCFrfYhI+RhsNtHr5TDU/DgzS1qMEzjINa8B5KH9nk6ji+5GfSuoZirm\nuXxp\r\n=CeXv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr5VChCGGG88waCqG4XQBh4bjlQtMwHIZxaaP54OZ2dQIgLcBjcBSvL3IyujSbaD5pFJijvKQWb1D8Cfxfm7u64yg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.63a5f088.0_1600292324108_0.4778563881479596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-select","version":"0.19.0-canary.b7995e49.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a831d4799.0","@material/floating-label":"=8.0.0-canary.a831d4799.0","@material/line-ripple":"=8.0.0-canary.a831d4799.0","@material/list":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-floating-label":"0.19.0-canary.b7995e49.0","@material/mwc-icon":"0.19.0-canary.b7995e49.0","@material/mwc-line-ripple":"0.19.0-canary.b7995e49.0","@material/mwc-list":"0.19.0-canary.b7995e49.0","@material/mwc-menu":"0.19.0-canary.b7995e49.0","@material/mwc-notched-outline":"0.19.0-canary.b7995e49.0","@material/select":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-v85p3lZWcAdJgLRPuvYAXYG5ABlVWs6KcLSd1hT0EzTzfZhvajX1h+WFP6YwDkL3FoIz+/XYVlr3gJ6qdfdT/w==","shasum":"00dd1988ceaf247fb9009ea11bd0fdb5237576db","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.b7995e49.0.tgz","fileCount":13,"unpackedSize":199954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp9aCRA9TVsSAnZWagAAzTEP/3RSRsvGsBVqxg8WOK5Y\nQIYC50mA51MojbXp/0qcDYFdJ3cYQ9G0vPT38dtmYviN+7nY1SOW6oWA/vpi\nlmrEpF9C3hhbGOnuxiL12eL1b979P5/9iuJDybIukRWZZ7hD+xrJ8UUvR9/y\n82K6192cIHm+1xcwQA4e+pAN9m6gp8kCHhhXPToEwShbHbdxxYRyEkWGCfCS\n3J1HW48uYlOhAFn0tDyfMSBMBNswKbPZCR2meTV3Jjy9Jv9yRqJloXdkDNUB\ndqZir1/aq9jCKK5kfWjvZs2rh5H83HlRXFqpwKBdR7vfMSLkphj2l4tDntlP\ny9UV8TiWkEXNJL7ywipO7Ix2ORt6pJfGkX+2AKdrCC8Vn6vt6FdrnFFbw46Z\n0H460cPcHLPLI4TGH/yXOS3V60R+z2wYtogEQaSvmGk0P6COPMgeoKh/kPGT\nekZU+bebsNRxw5L/xiE7DHEjLvPso75zRs0c+jb4m8aURKO0islvJuqRfulP\nrBS1uBqHu5oDQo3mO3uIsl/POza5vwJMZQoNj7E3dbFEWmypo3/uGV6R7vaQ\noO/Tg9ei92gyTr0WtFmGrqDlkNnZobO/ZS0CxJJmduvw42G4GyLc6VRCSEno\n71iT9xEGB0pcL7AyR9ld/kHP8z7TVS9Dv9+tI3JyalshTcYRDIzfLohw/kY/\nbZoT\r\n=biE3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFfxz4aBQ25dHt/bHJ7ZGe8SbK6ZuOpLUTcjMvTiTVVTAiBcdG7bknNSi42q0gZXEQjeGoGPtn+cFzXNsl6vX4BnTw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.b7995e49.0_1600298842299_0.578857137720685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-select","version":"0.19.0-canary.0da3ec97.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a831d4799.0","@material/floating-label":"=8.0.0-canary.a831d4799.0","@material/line-ripple":"=8.0.0-canary.a831d4799.0","@material/list":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-floating-label":"0.19.0-canary.0da3ec97.0","@material/mwc-icon":"0.19.0-canary.0da3ec97.0","@material/mwc-line-ripple":"0.19.0-canary.0da3ec97.0","@material/mwc-list":"0.19.0-canary.0da3ec97.0","@material/mwc-menu":"0.19.0-canary.0da3ec97.0","@material/mwc-notched-outline":"0.19.0-canary.0da3ec97.0","@material/select":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+1poptFzmZC08Mtzcl7S/KKak/KP82tVXnR8vSNUxfzi1QyE+ZJAgIlUh6dKutifcn9JkI7QZxIwdM3rt9KhZQ==","shasum":"9dc59beca01d76cc8781be7ae0fe904e21b3bdb7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.0da3ec97.0.tgz","fileCount":13,"unpackedSize":199954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSSWCRA9TVsSAnZWagAA/AIP/3VN1f2yx3v1BTiYyPTw\nvdO6Q0Mk417Py3IpJel7HPR19wbDtE4+0YtfOHK3BHKgO/CXcvHMj+6PTPW5\ncBrJyYzP9ONqpPm6lNjjcbrVYC9J8g+KSHHgGjNWb2+aZlSwaezhjsz/KwJ9\naG+3VI4UqqmHSrwl7iUMCLueJ4wyDULXRRLXsLygNTNSmUiMCSjGsSoLybPV\nN0JYlSos1K+BBiKB2XLabMApfNUtSQc9LxrD2kCPPUgBXDDUVPzxQTYD2Iqe\nFcggrrE2fgKEOr/rcRmugGuEMO9+26UJOADPLKw10MfYoO1b9g0aSCPkFFuK\nZX7n+Oojernc/tVQ51TdoeseroO18yKqMUgP+C9/1x9LryaZigg2nEIIAtJH\nGsMY30BjZcN6CyM5StA9AromgJi3LM1DLhunT81Od8F1gX0gGruCNmW5mE7E\nEqMLWHh6Ot3n/A8fKAR1Xdo3WtglBCrpas5mJF11d1F63Qbhypd3h4g1zuv+\nG5G2a86FQCjxXvt95c75g+lpUjqd7W80C4ePmyBNoxu5fzyDqSuo63LV1f7x\ndZ1A0orcq5K2y1kyYJrU6TJ6Ouf5Ls3brhy6lo8Eek2047dFhBuf8i45WNpV\ncMCjDi7sdnFvpqJ3RAqEZFMnHy6fzLhK3XPG5+ZBV8IiY7JgXX6wRWpv2f36\nSZt1\r\n=HIG+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLMVRk1l/DXwj47epxtYZXIXip9h61pGgMDlKX62YFSAIgA2RT7nQYs49kOg8/ADCpAw3d5Qx/58BiMOxu+O19UFs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.0da3ec97.0_1600726165870_0.9273429421115666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-select","version":"0.19.0-canary.a0793c96.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.4e5c350c2.0","@material/floating-label":"=8.0.0-canary.4e5c350c2.0","@material/line-ripple":"=8.0.0-canary.4e5c350c2.0","@material/list":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-floating-label":"0.19.0-canary.a0793c96.0","@material/mwc-icon":"0.19.0-canary.a0793c96.0","@material/mwc-line-ripple":"0.19.0-canary.a0793c96.0","@material/mwc-list":"0.19.0-canary.a0793c96.0","@material/mwc-menu":"0.19.0-canary.a0793c96.0","@material/mwc-notched-outline":"0.19.0-canary.a0793c96.0","@material/select":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KeZYN5bRaHCp7adwTBtCa9phHZofwh/RdRp/8cxL2YiNSdSmcWMIWAsWx/SypYVhUShDv+izKW/Jw/5RfmWklQ==","shasum":"87eeea27939cfe5cecd4f01be4e7163d895a1bcd","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.a0793c96.0.tgz","fileCount":13,"unpackedSize":199954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai7RCRA9TVsSAnZWagAATlIP/14wTDXHHTRwEAIzib7R\naAGxSDAUIIcV5BRdxq5OupGtOAfGI/5j6cLnngyMlb4GFUz5XC8rCODVT9QF\n97yNl4bUo0AaAkDRWVm6vxugZub3wWcCRoueZKZqaW8v1cKMr3BLvLGkquZA\nf0hHLvn4j/2HyV+AFCnT341dPbDoCoCptC+Mg2RW9gMkEJHPN2YjqLEvHwBd\nGj9V5nXjj0yocgt/IJAEWVbu7q1OkdMiUe/Dt6TfL0KmdQbtgTEwnwrwcjVH\nFy8qgljrdhYqyUriNyItUUnq3xkdRxHTGuSZ0NlSltoEUuOhl7Ad4h1sBroH\nTiBkVjGaK7roEQdApNqOTybHtD+fjagTXz7S/0R7Afc4ikJc1fNb5/wwx0mv\n6jPSAiPUDjzfP672MZi+U4xbMLaRrFIAiJVhLvghmVyF5dNovg9Hg7DXreFp\n4dIJ695XkfmrE61Xvqj0kEcPHi++JhOxyKwF6atMT+iQKGaX1Yh1VrjJfEzH\nqgZbUnbrNOcz6AKpQuFStYnlIuNqbAo2DVFPvA0NTAjrnUwckcQGru0QxlhH\nBt2eWyIlZC6+eldQKnK5jHM10YjLEytm96LRHmvxpozclUmDqjER51LRLFP3\ngnhvx4stCtZ9LNr2OoJjsNUB5h+5L9wZOW/6pwLxU0zMQBAfndb4HADVj0MK\nfTED\r\n=l6Cp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmPZEejutSkFYnH8leh7799fUm9Ssm5gpUDEiMk5X3zgIgF35eJWn+i7VpCDUKr8kQVbVHHDKbUCKOJD/IZyrU/FM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.a0793c96.0_1600794321005_0.6358735665323987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-select","version":"0.19.0-canary.06998a3e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.4e5c350c2.0","@material/floating-label":"=8.0.0-canary.4e5c350c2.0","@material/line-ripple":"=8.0.0-canary.4e5c350c2.0","@material/list":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-floating-label":"0.19.0-canary.06998a3e.0","@material/mwc-icon":"0.19.0-canary.06998a3e.0","@material/mwc-line-ripple":"0.19.0-canary.06998a3e.0","@material/mwc-list":"0.19.0-canary.06998a3e.0","@material/mwc-menu":"0.19.0-canary.06998a3e.0","@material/mwc-notched-outline":"0.19.0-canary.06998a3e.0","@material/select":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bpVyi+XQ9BD7pmdM1jRS9rtnUEhDt93of+oDWX/7Np4LJ5tjoFovxV1pMiH1VREi2oJqHd5qEQbb7s+S5wBccg==","shasum":"bb9aa6006fbdcc9af73c1c7ebda4949e7e5e6744","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.06998a3e.0.tgz","fileCount":13,"unpackedSize":199954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakHXCRA9TVsSAnZWagAAeKQP/jIhE7dC3qCP9D6ONyt/\nOYy8s+Lky9lAp3wdeBfMKHIR1g56zGM1BfTkde1GP6/IDsKQTQQLuvwfoRSM\nTnq8+X4KgXLUzOIAOeK8I6ZdktU3beaB5zsa9R9GytlolE3Q2YaU8518icdC\nZ1DnSz9WecqMu5Ks1ETlGpTm+4aeIlem71829ryXGOsozmPmwXg+nhdNmQFX\nXqATxBwL7HoqtCXZZtq9OM4pAro7rM5uZjs6rO3AcFIJJtMK0B4Rq+DhoygD\nKidEK1ONKIUKBiqc0k56VagQEI5GXJMhWAGf9MTS6f0slVRiVRl3jor8c4vk\nY9i06G7rCnsjp6h6JvTqjxwwfmXen2Vj6IZhJox3JrgCiReN1jls9kKP0bnj\ncRkDQlYO7AGhTAFm3l0OcJGwhwHWtfljJf1zsOaRXNpyPti0WwoKBG1oyge3\n0cKgZ0Cdvzij9Ud2rnf3YxTfW1S0gKm4m3V3gsJrtVCokLLsQGBxlwL7I52d\nPUZHTcJDH0p9jRTUjxfLZxUuHePj5ekLMOPBQSNaniBlzmC1N0Mgm5YnYpvQ\nFeLy+eHFo6fqO5kGD37kxgJu3gdnirYUyoYUxMyhVX9nF9beVm5cVpZIvmIz\n7frgM1NBh4hqIdAkTfV6Bm9Gq4uLNtWEP/gvzdi6GEGQREtUDqzVFXpB6fEJ\nFhM0\r\n=GU9S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6TK2WS/T6cbDQka3jtDdkTCEI/pmoVBsIlUntiVIWKAiEAyArxERHHa8MuPQYabdl0hnZlIdlQYx9XuDirvhVVzAI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.06998a3e.0_1600799191018_0.5672786409245845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-select","version":"0.19.0-canary.3484a90d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.16c563ef7.0","@material/floating-label":"=8.0.0-canary.16c563ef7.0","@material/line-ripple":"=8.0.0-canary.16c563ef7.0","@material/list":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-floating-label":"0.19.0-canary.3484a90d.0","@material/mwc-icon":"0.19.0-canary.3484a90d.0","@material/mwc-line-ripple":"0.19.0-canary.3484a90d.0","@material/mwc-list":"0.19.0-canary.3484a90d.0","@material/mwc-menu":"0.19.0-canary.3484a90d.0","@material/mwc-notched-outline":"0.19.0-canary.3484a90d.0","@material/select":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Display default only when focused.\n`helperPersistent` | `boolean` | `false` | Always show the helper text despite focus.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-r70ggrKlSDT9VuBvZN4a8lzAKJ3kH+noDpFCTJtjrj1PLIqUOO9Tt4AUIE5LNiCQrop7qh5qiq5oWQyDrGGXKA==","shasum":"84da68e82afd4ff6e2ec193b6bbcb9e206c7ad1d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.3484a90d.0.tgz","fileCount":13,"unpackedSize":199954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanUGCRA9TVsSAnZWagAA2R0QAKUoR///w7LfyDuWAjAg\nEUoIfBGueomQq/rXHLOpLw6pE+oxBgJfitaQ/0sk4HV+5y8zwCpez0pcT/6K\nDCFBHx5XWp+S+YBh8D/gGzKwVsenqBXASK/oj8x2gmyE/IWA1qwRALte2jkV\nOHOcXfMZlsbT8b4tXsNLBrCFdCZQR6Y6v5hc5j8ycJHTVn/R0f1gkJm+eqV3\nio1208ThUyXH6CZJe9gbF2zkbu+W/37phlYz2gXtdE7ZcseUb+yWcpnpiLi+\nR+AAm1V1ppTcbjMcTbAF/u/cgH4unhUTMYoJFa9QJx7vR1nZ1tRItbnxXpur\nvLWmIcTl2/z95SikS+o0a0Xq96fM7a04Z/1qKH96/va8nJ4yNE5mjCHiiIip\n/kXgIiFiRnNIyS5Ra2B7BZ6JWxqleMWs/0Hhj9LxGNxPgj0MIK3FChzcXLbA\nPUhPj5Qhs3oKdfDgZzo7dU4KmY9QgZ2bxbQfW1Ap36C5++RX86ququD6ukSB\nJ6wWJ3K1R31VGMY+0XVe/dYfjI4u3hXUuYliYW396iMnLOC/11r4NuKP6Qje\nHVBKlKjzYW+lur2Ua/4YqQxYwapLCEHxA/yCyFYnFqyUVZn6IpseEE7xumGZ\nz27j8cAjvekHBIHRTRH/NtmfSUL5130a27aoLwPnOVlv62hWhVimoD5szlXs\nCj7x\r\n=rGHV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB1L+MHLMjghBBnAc3UO8enEn5YQvw81BMIacnndL7mQIhAPWJpvrAIT9HIJcGyqTyrCmOBvCRZLzvjt0JrygwOImy"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.3484a90d.0_1600812294024_0.8531373859223181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-select","version":"0.19.0-canary.3f99af40.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.16c563ef7.0","@material/floating-label":"=8.0.0-canary.16c563ef7.0","@material/line-ripple":"=8.0.0-canary.16c563ef7.0","@material/list":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-floating-label":"0.19.0-canary.3f99af40.0","@material/mwc-icon":"0.19.0-canary.3f99af40.0","@material/mwc-line-ripple":"0.19.0-canary.3f99af40.0","@material/mwc-list":"0.19.0-canary.3f99af40.0","@material/mwc-menu":"0.19.0-canary.3f99af40.0","@material/mwc-notched-outline":"0.19.0-canary.3f99af40.0","@material/select":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-YFEpy2gzWkiNHBpnwfI4YhN0lBNu//S45op1KiTGiQnB5TKCtvQvACKwlAneRGtt/Uf7VVGdtjNK44uUi6J/Nw==","shasum":"af76d060f713eff51cc35ec98e4fdf1a8081b3d8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.3f99af40.0.tgz","fileCount":13,"unpackedSize":199789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSojCRA9TVsSAnZWagAAYpQP/jaE9BiN4BRJqbs4zjCt\n7yrD3zjYznbvx1Nk5gOX5Ufbif35hgQ5QBSFqVa7YA6TTNZhgYMuu2y7R5Ps\nihfqvfGbQmaVHVk7belMv2mGoY4/qVU6CoX0+irvOuQ3L4FaGDhUhJPKrXNn\nSTvdZuJt/x7W/B+VJXc9oc89HcJvRxh0OBGXditQkL0f7ugNAXgfx84rcjSh\nNa3tvimp6Ce5vbVc3MNhG61vwYb6Eb2tLPCPrVROcAGVHXJMjb1aldUXaFVx\n/PY82SE2R0bpHnbiov0+gIszKJznNb750jEgdj8HuQeVsk4c8CJ4h+IFqD37\normRViJbUTO8Nkr39o6H9bwgoWcFSVWBVyta35qJ6ZWcwUKWfDPRYcLfVwF1\nmqdb/p4ucouZfOuQ29kkuGBVDayi/3fJCND81IX02bGMdaBN1QzfIzmqdXwj\nZ3Ik+IZopttpy1ChiAmLa/KUOKVddAk4iVueJ1BLHwXymMuiM2EpNp1S0CJE\nvNcJMv/khWouEqBnfBZyCHRY/yioO4hsJ3LzBTF5iePh+gDCKFb8TVjBcUEY\nnOBZFdKej+U1NhD0nuOUh0kgpWrMBNYIqotEzxwfog9TegGN/yDoTWV0MlXy\nMiKvrb2TCNTCfFeWrzfMJipQNA/dLOsmRZ9FcnhH3RpMrYn4Wcncnl/0ZwBv\nHKoA\r\n=7YQ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEUym5f0n1l31j/trUOHIxhgFlVSWKO5AhP9lJTdkaKoAiBTTdYG0f6iLHk9MFncDH+LZakz3cSApX5bE+9BiGgjKA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.3f99af40.0_1600989731208_0.9078343198938206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-select","version":"0.19.0-canary.72aa1129.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/floating-label":"=8.0.0-canary.d4cd83a85.0","@material/line-ripple":"=8.0.0-canary.d4cd83a85.0","@material/list":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-floating-label":"0.19.0-canary.72aa1129.0","@material/mwc-icon":"0.19.0-canary.72aa1129.0","@material/mwc-line-ripple":"0.19.0-canary.72aa1129.0","@material/mwc-list":"0.19.0-canary.72aa1129.0","@material/mwc-menu":"0.19.0-canary.72aa1129.0","@material/mwc-notched-outline":"0.19.0-canary.72aa1129.0","@material/select":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-fgzWGzWmDMW0MQgOhlL7CbrlzWEcqFTMuIqV5XqlgjyvkGmufvHUBvOqEbFGCatZIXgKSbEqYL14kytQBgSHQA==","shasum":"2fcf62d47b0329099e90da1844a5787296c1f44b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.72aa1129.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblw4CRA9TVsSAnZWagAA0JQQAI/fbhFL2PAOWjQJHlGF\nPG33JPLGgEmDxt/Lg9VRAMJRBI1AuKF2WI44mMAcQrLAvrF2gFwQSBrYGISX\nosXiWdGATR6jnbbJiqNBy6f6VoMqaEH1yWhQOsJUaLfRNs4U26+EC+SgUyOQ\n914xjIqazZZ9NZ7P+pWUDLkutcHY3u8OO425fkQs2LNdB7NVMp9iCKE+oomr\nGhRIDUENrnaPWJAYHwAGJLhAxM8jPn2PrFCkE1+/rRo4B7YRJC5gekDbqevy\nhEWj0WD3Pf5Ald1r2Pb9Ihs7L/PsT0L3xGk//SAr3i1Najki8QjU/dI3Ed5I\nWP/mJpdb7SVn6DSFSwwUmIQNfr8Ei5TVcnSshfpTk3eI7cPXQFF2MJ6geyQZ\nIoIKdlEzDz2m3WNZ0MuH8eU9QmeYfEd/JGD5p0fw+GjmSVcPprHp3svrxPxg\nr2rm/Na+MFJN4xeTkdp+8jKabdbh2tMXsaPnY2SZ1ZSR6/HwSoKyATj/aQMy\nFhfTXj5iG2TcZUqwQltQsNlJTiZvCncQvsRINV4vZBdMisDuqRkihf7g8Tmy\nxCGtSXb2hi3KVK74HnQNecCeQsAmeMDQluVE8tUV53bp5eQ4HYlaTpU0mxcf\n0wFBUaUS4qpUaOcuQ3ZHRClKJYJi+6S6tEiIGqxIDdwBZD70OPOXl6TIhVB/\nKOHH\r\n=OqMo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDq+yo2yOrTs65QRibKd4qAupYRLRzJOPa20s97clz16AiBfqv71jA4RhfyCOhle4/95car90uVhy1zvBXJoNd3h1Q=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.72aa1129.0_1601068087749_0.38897749834782"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-select","version":"0.19.0-canary.394fd3f6.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/floating-label":"=8.0.0-canary.d4cd83a85.0","@material/line-ripple":"=8.0.0-canary.d4cd83a85.0","@material/list":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-floating-label":"0.19.0-canary.394fd3f6.0","@material/mwc-icon":"0.19.0-canary.394fd3f6.0","@material/mwc-line-ripple":"0.19.0-canary.394fd3f6.0","@material/mwc-list":"0.19.0-canary.394fd3f6.0","@material/mwc-menu":"0.19.0-canary.394fd3f6.0","@material/mwc-notched-outline":"0.19.0-canary.394fd3f6.0","@material/select":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JPvSpRFFBTainRU9Obcgz2VkHIn9RtV4X1DL+itbQllxNR7Ea5y1bbzS8/Fxr8K48J8G7Nn3UOPRNFHT+RiiiQ==","shasum":"0caf47d86a9e5a6c52d1e5f1b132835ebdb1d1d7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.394fd3f6.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce+DCRA9TVsSAnZWagAAw58P/3wiKGvHuaoljbhTIZ8l\nshUuZGvxk0xtfkdx1xfnajl55/+Y+nzOkselR9M53U6UJyddlwOqzF2TbdQ5\n3BbijzkZA8QppXV2LJqFPE7f2I/GBCapGctrTyhBabCnw4b+jgDMPUtYsodP\ntJ54p+gpA30xJX2HT4ogrTEzv2tz3mMIdph5YboKd39R/bJp0d8jsQYbymzu\nQx+0TUqltmXKfdDkOvTvUwfq1qSIGH7luTQtsQnzx+re6AFegD3PRb1F4wSy\nCQnbAt4FbT3jU6DGUvZGBXf48OPEYWWWnj54P4l/5ShKNe0o7uAm3QkoRyTn\nEdg+oOkzQNurztcxdReDKj7wSbRtxTS3IV1QmOPITmysg6bmsEJidwR831+T\nPNpOuYmbYYnNtDWumj+2Pic64Xw1xTNXPtHnH2xD60DRBqBoYukhIXa/ZfjQ\nQz5P4UIxM1EH8f5Xy9H7AwageeAiCyqLTSmE2xHLF5F5Yi20qQ4grvlmyxHO\nVwgFRt8fOyaCizBgw3ZhQYl6EoZz0hYpbqUK2S2qKsZomgQXg1bfyfVMbtgy\nE2/dx70Jb3Ukt/dawcBl8rnQs1Bna/+EPFF7lSnIAwoKjqA7ii1dmx+sxCTX\nTmt/2SQuFc9kxZpKoRpdQYjdXF3KhgJWOkdAIDlwcLk094ZTSQguDo48Slpk\n0Bu0\r\n=F3YA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ5M1ra4FZNgXWVF5YUFmMiVDx6DdSYN+mGVC3weJaIwIhAOD2VgaJiQd3fR00f2KdYsq/o4QtTLjcSFl8VbeXepFn"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.394fd3f6.0_1601302402864_0.7255377077575269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-select","version":"0.19.0-canary.347110f1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/floating-label":"=8.0.0-canary.d4cd83a85.0","@material/line-ripple":"=8.0.0-canary.d4cd83a85.0","@material/list":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-floating-label":"0.19.0-canary.347110f1.0","@material/mwc-icon":"0.19.0-canary.347110f1.0","@material/mwc-line-ripple":"0.19.0-canary.347110f1.0","@material/mwc-list":"0.19.0-canary.347110f1.0","@material/mwc-menu":"0.19.0-canary.347110f1.0","@material/mwc-notched-outline":"0.19.0-canary.347110f1.0","@material/select":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-XypW+b4CzXMnwP37dETel2DzZoruhAGRJUL6qT9cCidU6LoHCTKj9ShFEHIakh0TYxIMqsznhTrmNY5/EViSWA==","shasum":"cdeefef14baaddc1bd17a395470a8b8ba4fd0f47","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.347110f1.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchR6CRA9TVsSAnZWagAARdgP/ilW1u4ZIDQd3qJ41baU\nY4Tz6nK23GCsAd5h2JqcS9wPPv9cYBPgEUKME4do46vDf0cGRVN5twaODCYq\n22YDkXpfJM9uRCKudclvvRZHP+N/4jrAcjR8bPGJChpYi4U3er7BAOSW/ZKF\n6OVA2nS8NVC483jULvYeE0hZNLYKOr3W3++F3AvclyFhOPU3O0jk7C+QO6jW\njnAVksTPs+xamxMYC4qLYlCmOGkSg9DQLLCJAtXT7td1EtltVI9LEM7cdRwT\ntI/OIqdwYx7tWh+3oV8oFnaJfUDNP/Dzo0Sb4zSQzzkLOUaZWHaFyRRBvRR/\ntsh7j6V0YFkaz7IekYVFG4Q90kYQm7lU+zeJF7YBQLcdc0692Hz7LofJafQn\nNiDBuHiiOsiJeB74EEevoyO/P5KO8YvVizj7li2Tp4ZzZXEg1agzUVYBSrQ4\nRfxoINidUzcohdSqSmsNqV3n39sSh6Tqwo6/zOu+JXxBab5GtqKr+BV45tAW\nxxW3cajnfvMQYIg98CYFxsxexRzLLP1Lm8NuoG9tWi6J7nrPq1NFVXpDR5mN\nMuVAlVYheKcoY9nfybL1uyVswUDBb0oyn/ytG6QNPp8j8IOI10EP+FYe3iv6\n4GS9i58hIjIyCTW+HN4aG0Bt1hH5JxABBpGeNcJUC+Fu3xBHSe55MyzqUwhi\n5aPX\r\n=5sYF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICl9m+3HlBoB05P9Juweo1k9i+UiD0XyI3fvFRNyHvcpAiBzggdeoj4OmIJZ93TzBjVQU34SEHdH8m0Btm1nnNUV8Q=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.347110f1.0_1601311865851_0.5573247246873783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-select","version":"0.19.0-canary.5e330bb9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/floating-label":"=8.0.0-canary.d4cd83a85.0","@material/line-ripple":"=8.0.0-canary.d4cd83a85.0","@material/list":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-floating-label":"0.19.0-canary.5e330bb9.0","@material/mwc-icon":"0.19.0-canary.5e330bb9.0","@material/mwc-line-ripple":"0.19.0-canary.5e330bb9.0","@material/mwc-list":"0.19.0-canary.5e330bb9.0","@material/mwc-menu":"0.19.0-canary.5e330bb9.0","@material/mwc-notched-outline":"0.19.0-canary.5e330bb9.0","@material/select":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-1PYs9xAPXl3/RysKGRJAHEZt/6b+Aa2Z/eLzADhorTRUJM3HyCFoMHjpGvmgtPPTuzPvVNCWmx6dV7Vt+/mklg==","shasum":"efdb6cd67162298a892909e0db5ca6d8ce213d92","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.5e330bb9.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQBWCRA9TVsSAnZWagAAQa4P/iHmi+7QOL+3k/mto3C3\n0p/r4hpnkceiPNo/IogDk+FPJn3QWocZNZl7lkjghUV3+uADZpyKqVzXEuJn\nt9G5g+3HaapisBE4CKGBioMesGlkHlUEwFon2j1/iGQakJEeDW1DBap/tU2j\n046zIYDqM3NtIAJz6cd4HFo1Qld7Zr9+pNlXT6N/AVvfTRW5N4SawjINoMTv\n/GBXwJVvrKU0HtuT4QaBIjY3ATvaUHl6CPD8Y1XtOBoal06gopZFJBcSwtUk\n9tQstI9crMomv4ObE9qOTNw64YRQR1TRRSwpj/40s//GPD7T6bkCFPImMXsM\n1TZvv3LBveiXl5YY6zu6lzE+6FMHKOIPU6B4/nUbyonoFpeeWZ7pSgkgQf/w\n5Okv2+ROmvOmIwVx6idTDksMYiEhxIP2pcIKGeiO7koR/6rqzNY/skh63WDy\nopbzSIS1r2FV1Fbs7zh2BAHnSEP7aWDwOyvWpe6V6YD1BRb2+6B9/vg9RAg6\nseIGpbJ7t/8dlpCKfE5GAD6kN49AA3jq6fjm6zvAMkK8NKd9JQumEpwfsPfd\nfMUcnlHZ2Yi14EfxfP3eZZmYw/vOUlXlS5HDOYRDNYPfmqbSdgs2MJMXFdn3\nxSSrI9SPvEyccvFPy1ANtp/6QJuOF+6naGBMKHdBWchJSOY6FTtrqYtj+3Jz\nluB6\r\n=R71E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4y88HofEhzxqhoon3yGytuTCcm77+eNrS8JB/GKE5aAiBKEQIkB1IMt/sb1NpQVeFevVi0FYeDvTXq1I/DLeLtmw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.5e330bb9.0_1601503318055_0.49348984461395373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-select","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/floating-label":"=8.0.0-canary.38ef4501f.0","@material/line-ripple":"=8.0.0-canary.38ef4501f.0","@material/list":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-floating-label":"0.19.0-canary.30b9e3a9.0","@material/mwc-icon":"0.19.0-canary.30b9e3a9.0","@material/mwc-line-ripple":"0.19.0-canary.30b9e3a9.0","@material/mwc-list":"0.19.0-canary.30b9e3a9.0","@material/mwc-menu":"0.19.0-canary.30b9e3a9.0","@material/mwc-notched-outline":"0.19.0-canary.30b9e3a9.0","@material/select":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JD61rbqRQ5rTd6zDW2/pzH+Ko/R0QjflCCyBBdHs5XputzrzgYp/bR3M8//z3VwUVU36W8+z2TRc33wu7w+FtQ==","shasum":"34fcf1f2dc7a27e3455c161747b41e23a511444b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.30b9e3a9.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQkFCRA9TVsSAnZWagAAuZsP/35r3jIwWdPHxaxxbQXc\n8plYLP1EDmz2kcUNTfgOtxGuFCkHRWPq72+OoLRyQElCIqBPO4eR4Nl5KyJV\naUB3xCrRogHPYOkfycMfZe7wxxzgGavOhOkFm46yBrFi+KtIbd19fbR9qaKI\nGpMEB51T5uI8whwpusW/4GHfaLlkNUnt1Q4set4lAez0A3mtA4XGWPKkV7Pp\n9jzedSkrR9f7xTGtz5duyRT27kwPPjo7G+QZaPMoc7cK7SZm1nO+TBUxrdlI\njFjM2nmZuRqIYdFv3Pbx9TEY9qwdPZDDGXY1fyvzEGsc5tKAo9XVof+UBMTg\nnfJRS4Oq3TPcVERQcGDUne9PuEWPcMN5/8QfhNy9TCzV8EM4BRwvnKIyZkMP\npLMrc9Kvk4duwh2830zeCWzoCpl1bYqbDRzF+upAytFkvWeZwmbXrKQ7osdC\nY9yCWMco8TnFL2j1Y+GIKVMhmSK3BEPv+GlGgLy4G97W52ZUELFIG+TcytZO\n/NnElNd88q88lid5inNn5OL48P3UGlf3G39q9m8Llb0VKR1gvGuSwJ/oE+lE\nnYRy2RUF3bIUQzi/IL5hQ9OBiRY9c/MGxpMbifStsl9+TNZL1wryw+XZ09pF\nKfe8fhj/iwI8ba9beMff4+mVO8b8Z9ttId1Rjgnsh/bCZYVIpQaGXvZeB5K7\nPzKW\r\n=a7si\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxTHAYOjBt6SDT2H2U4/qhepLRTU6X9E4QtST1eLbnOgIgZ5WNq0hRQIO9OXeR/nUKvSEKKGDBcJNKwY1nvMAoBf0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.30b9e3a9.0_1601505541307_0.0022009434874399325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-select","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/floating-label":"=8.0.0-canary.38ef4501f.0","@material/line-ripple":"=8.0.0-canary.38ef4501f.0","@material/list":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-floating-label":"0.19.0-canary.7bb04b9a.0","@material/mwc-icon":"0.19.0-canary.7bb04b9a.0","@material/mwc-line-ripple":"0.19.0-canary.7bb04b9a.0","@material/mwc-list":"0.19.0-canary.7bb04b9a.0","@material/mwc-menu":"0.19.0-canary.7bb04b9a.0","@material/mwc-notched-outline":"0.19.0-canary.7bb04b9a.0","@material/select":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-m6epO4XMf3BvBAmsCtHaUs5Jv0ESp6bpykNdGPAJeZahIa+XWBjJexfXZEIKOzT7+nt2EVdgX40ZXWPnNTbAog==","shasum":"96840aa4fcbc7b826fef6ec98c5027fc239b8a06","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.7bb04b9a.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmUECRA9TVsSAnZWagAAKoIP/idIUnTw0mKB8ZFTDqgb\nW6WZhMrKHcZk4T9sShzsrxF4GGH9k4dQIl90Kb2+mgWQP/d4nC9PRCr7Uoah\nvO+jRgfl9ZkirtJHGJLNSDiV+yZ8m9aJFmhvcBppBbO+/dHjewB2CIjaaVlA\nbxVirKjrlNp7R0G7rY1OaMsJCZQdB4e30UjNUpg0uayRzezIkpVAkL+BqA1s\nj3MPu71QzWokMK79Vm2ZoqQMJZ+G/JpXSSl9AV2YCNL2xdmsxEy6/U5Q8ABw\nsDzrZDGzPOjq3rKa0mdb3u3rVAjItHmaJngEU//Ex1esRikG1O/dI1oNen6J\npi1Ss6ok8Kth/ojwEzdm8D7tiXu4UvgXzLk+4+SONPYRiv3A2Oexu4ntkr2f\nBNMgMKMOPwC6UFBT03dylbsLPp2Mo1cOSEenyYe8CwnoTOjk2oFqg/nedEK5\ne9SPALX65DO1BoBcCfuq+//og3gYA8r0DwZcjl2dwB12h5qw1aXh5RRx6SA9\n5r/0+XcLi8bsEYKwyEmkQL2L4EP/SQ20MqyGe4fxNXNniZLXIxRzbuMSvmSa\n4WzN8dkA1TJ8sQ8LaskXpUCqXyjuhh9r6lTEa+v7PeUFwMHHR8QnkQdcsTVT\nlydOhc+Td13EDp4FgK+l7mHvS1wMallH+ds7E1rbVA5pvKjS21OHngTk7/fy\nKYKa\r\n=OCva\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3LwUQlbqqrXjqz8EhL754KqTKzzaXX2SmMeW1w11pKAiEAzR5BGC1kYa4/qUa6tabzOtwOm7b3tBYzmfc0VxQnDWs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.7bb04b9a.0_1601594628240_0.03052744590846479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-select","version":"0.19.0-canary.615d861d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/floating-label":"=8.0.0-canary.38ef4501f.0","@material/line-ripple":"=8.0.0-canary.38ef4501f.0","@material/list":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-floating-label":"0.19.0-canary.615d861d.0","@material/mwc-icon":"0.19.0-canary.615d861d.0","@material/mwc-line-ripple":"0.19.0-canary.615d861d.0","@material/mwc-list":"0.19.0-canary.615d861d.0","@material/mwc-menu":"0.19.0-canary.615d861d.0","@material/mwc-notched-outline":"0.19.0-canary.615d861d.0","@material/select":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-qOyqoYiL3YM8rKhjIhZYHZRVHmTBB8JCYLpeu65etr7zPpxXXoXLbc4tvGBsBJbn7i4vJpRPW3KL8Vo2ZkF6TA==","shasum":"472015303e373cad8a24f751e3387b637ad05b69","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.615d861d.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoOUCRA9TVsSAnZWagAA2NQP/0axvufhFqHVj0LEdvvm\nl1BmdmhuAM0XEYq6/iYgutI+XH56pzrZQ3HpbU3hOraCh/KPRnZr91rwT29D\njzeNFeB73vo28at1OwBK0pPn6DfbVh+6Ykm8uZo8tbgjsVDZ7yAkBUeA395v\nLG+ROeTSKl13ifFjk6duMqtMrkFbB/b9RtLxywTpozSzIjohMPcr8kR3Wa8K\n5TxRDkeh3VWGR8a5X3I6Glgd8T7oJP1qLhs7NjMaz0MmIWu3AXBZtJx5ACZr\nq6xzfdNxglf0LFpZ3BR2yDFu42+TxcIos+4h+c5Sc4aWdAC/Q2P4ixDxIU3k\naLs5nbMD5H8YLz73FfaMl3e4QrT+N9eWkkGxJ2ed3Pe2jLctSBtaS/Y1i65Q\nkp1vBhJelnIs+UN3AKd7caInE8od0F6SD1KKkzkaKMt2AaXVZPGZaEYDfZ3b\not5jW8sZm4ATfcJZ6hGYQdrCgXQEczt2CeMFej4W5C6fYqSLPAJdrTPRGiMC\nIKdyVyxDkYvtA/fdJch1MrTdJgJB/dKu0xlQ0mYma41BSsHlv3Ba5RdTuaEE\ny3fTdpZpdXvvNQTll/0J6PEw+9WhwYcJ8AAux1uc565SQH9F7E0/Ude3UpcA\nAZNCklpNdnxrtf2p8SyD5p8rHfyL/bUVT+AhKmNLyKBR52zuwk+WJaqFr0E7\nSV7p\r\n=OA7z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDPyXZMO77rEatp7cMEmw6I94wHaRo7Z11tw1KKZfDssAiB/DA3YeTcJ282yuVLBf2LENNa2pHI3FZKXCgO1AD8Kgw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.615d861d.0_1601602451982_0.47224210343512474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-select","version":"0.19.0-canary.af110e86.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/floating-label":"=8.0.0-canary.38ef4501f.0","@material/line-ripple":"=8.0.0-canary.38ef4501f.0","@material/list":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-floating-label":"0.19.0-canary.af110e86.0","@material/mwc-icon":"0.19.0-canary.af110e86.0","@material/mwc-line-ripple":"0.19.0-canary.af110e86.0","@material/mwc-list":"0.19.0-canary.af110e86.0","@material/mwc-menu":"0.19.0-canary.af110e86.0","@material/mwc-notched-outline":"0.19.0-canary.af110e86.0","@material/select":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-whUnTCMauy7d8gzNA4F06YIhzpIPlNigoEZJPJQ4bej6MCdDnDN6Qu9RhDFEzcWx4nyYhkqzYdwwgVQBaHcACA==","shasum":"e2e71cc363cedbbb0d60c9a9d56a434c169c683e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.af110e86.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7zTCRA9TVsSAnZWagAAdH4P/3vSrgvprlPLUGiSLFN/\nvumQltVpg20xr+2K1Hty7MVsHc4QO5AB6U2kDNKX0/Oj1Al8UPh3U0qZBgCW\n+0KcZVBdMAFfc7nWir6IiYgm+7dyp00QldbWHRQlpZgbOnkBmXXS9vq77Hf9\nVtMlKqAeJs5ABUWqklYh6SbNxvp9SJrmIJrlzj/ag1c4yZrN2MU1uoLvThed\nFdckth/w5hAnHNa0XnyhK7BsxLn0ImV8Z8yAeqpWoYQtzUhp3aS1AmBDUVis\n94LiRL0VLnQvFKC7YUVn9DnbOIsTDroqFywAcTNOllmNuOjYLeTst5CqUCVt\nhp9BnbhXSanjyJtI2p2FW46ZHetxa42n+9chOCbaC/2TaRKa8uyO9qYuIUQf\nv07UDh0bZG+VgZtSxq9T2h8kCNY+UiJz2QYY6LHJ/EETu/i/iEtKkyydpI5/\nhpEgDSKgygLuBJSdSyQIcN6m5DQPC9BPzea8rwg5AYMR4UItKaGdTwNSFtAN\nLT1wZF+5ezTksrrG+cj1eU1rdgt2UcZvsB8XuC2d/pU0uaX/sLExNvQpl+uN\nFl1ba3j7/ofKiQ5mWqnTY4I6ew3Faltq1DwU2ygNB+TAQQcl6HLT5YNp8Pjf\n5uuKXqiljob+zfrkCDSiFBXnVh62JI3hqRTTLjPt2nVU9QlZUUWe92Bg7VoF\nr4F3\r\n=Kfwn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqs8vXaU4Gofjs6BtX47M6P5GbbCdIPOIDMFGEWSA7lAiACU7DnKYhju2vpPYX9503w8CSBW3mTFAIt5jGIhbj7JQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.af110e86.0_1601682642680_0.7086165944795173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-select","version":"0.19.0-canary.89d27ca5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/floating-label":"=8.0.0-canary.774dcfc8e.0","@material/line-ripple":"=8.0.0-canary.774dcfc8e.0","@material/list":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-floating-label":"0.19.0-canary.89d27ca5.0","@material/mwc-icon":"0.19.0-canary.89d27ca5.0","@material/mwc-line-ripple":"0.19.0-canary.89d27ca5.0","@material/mwc-list":"0.19.0-canary.89d27ca5.0","@material/mwc-menu":"0.19.0-canary.89d27ca5.0","@material/mwc-notched-outline":"0.19.0-canary.89d27ca5.0","@material/select":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NrL3ohANZoB2lCXV2eQs1BAZ44v0bjyg9l8uyZnX5yhblAf1ymzcVpYUfpLrlHOvM1oVgppHEJrAWeUD+5TKkQ==","shasum":"c49eff6bc80a4300f9753b4bc77205914eb2364c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.89d27ca5.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8gVCRA9TVsSAnZWagAAccAP/2jdkCrM//7EX+4m6kav\ncluh4nRG456k1qvfw7hYySHJssWs97XznPMF4NveHqOGCsVeg3lcXmYsnn/8\nVMWqxJhAXGx5bpuRZLXQz2hSIDZUaGkcNAHJ5KMIvKKG6GwOuOtJc8+6rbIa\nI07SAEPdPAdtc4Iw3LxL8v/1JZ91GXStM+Pz2FbHzkTFs6owtvuZn1aOTP66\n1bSl4uHy8Z4YY7xqc0wy71NbHv+69MuDU6awVzYLtzPWaEN0TCNOg2Kj7iQC\njDNe8uEDLHega4jNbUGDLs8GJDugjdLYx6tAPSTA2QVdWCvnivmsBG3MVEfm\n0Bb4KlETSCS6vHs9v8uarkM9qazjK9hDLwOecBDRvwIg3+Zlw6yBY+C9D3gB\nSo417z0udpp9oF9J+2qH8aVP1JzcNREHH+brvHXe9ueFb49YYf0tsT2uBgmE\nTgvS7GPZlgmnrvo0+I+hV5Jn574w4I+9InCT0KhFnjLsIXOd1JmsEN+jitJ1\naAGH/Gi5NT1xZpqlBffsyghAcMHU0Tl/OIJ8ePh2Y2RNNBOmdUS/TyfC3KEJ\nO5uxF+3H1gsLFZRO7s7DUXA6yawke/0lxb2PTnVM7LDbM8C54E9w8DOk+yxa\nrHz27JMUTiTJbFXWbjriOUgSpM1wsgJV+/hDhp1ZOULRfYYlU+SKGr1B8gYZ\nBubn\r\n=bOv/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICIiYmFLDsxSeLQSZeSxIIlFCUMJkpdGTDgwm/HGmWIlAiEAuTfzUZEKnX7UE7uyAKXiFN7Trcczx7JbQ5Vgw3OdQK4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.89d27ca5.0_1601947668489_0.26198581987353453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-select","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/floating-label":"=8.0.0-canary.774dcfc8e.0","@material/line-ripple":"=8.0.0-canary.774dcfc8e.0","@material/list":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-floating-label":"0.19.0-canary.9ef2e7c2.0","@material/mwc-icon":"0.19.0-canary.9ef2e7c2.0","@material/mwc-line-ripple":"0.19.0-canary.9ef2e7c2.0","@material/mwc-list":"0.19.0-canary.9ef2e7c2.0","@material/mwc-menu":"0.19.0-canary.9ef2e7c2.0","@material/mwc-notched-outline":"0.19.0-canary.9ef2e7c2.0","@material/select":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-jRcn2zFRuPiZzGnYNfFlZ9cKLoi5JqLX1ri+xLztwVO9nNETx3rXlX1DcOU+Bye/tsI9MbAAFXOqDRwMCs131Q==","shasum":"f7116a1af2077a0c9fedca8ee3ee1c0bd08a0e88","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQiQCRA9TVsSAnZWagAAwYwP/3BdvYuRP5gG6ZoJazEM\nGcMrY9jYehK0Z+RvOIrdCFk0fThFvAKbHHGDLenOMuyzIX8ge3JYGVIpym4F\nQ8zIYVW3p9u0RcTJzYB8oXaMuHmbRAJ56HZ7Xu6BXJ68yWh96Q1fJ+Dir2SB\nPAukibl9ET2/aejYIFtQzLQHmyAY+t2py+/9z1zuEWcAm7LhVuGjZ3Ici5RV\nYMSzUTTW9DuisKOnM0+ZVzPZCxpgwmfuhbhjm/UhDfW7RDlv6Dyn2yw6uSFe\nvurlkAiqznmDfIg98a5hqtVtJIxxO6CYDqvFNwE7Yxhye3iWvObca3X/9WNF\nk7efgLy4HOJyxSHd0kXMzJWe00+NLwhhKf/s9jQ1RII/plbHt7/tbeWUPzmh\naB/4f5mtY0aL0z6BrdyzT0p+eXppaT69nuD1pLu5bvFMa3/s6acxzIsemQQc\noUlZiOQ9xIuEOaV6vYquXOXU0ySjSGykU6HftBROX8ic0xYDId/WPxtFm7C8\nLtWur4nyaU/XxeBBFtN3eRchkuyGnhzNJzPp532dTYmlHIWnemRaPZLqUPT7\n3xrTXHPUwiPPDN9fZJk+i0jpAvaD/ijm5BHgg6WbxObrJ5dM/KiVh6sPXIMl\nZ3lWsCS4IX64DaYp5P70h67GZgN9NA8ltkNeO2XPi+5XgrWaoKZ6PyBcr8fh\nhooS\r\n=B+c1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPLy3tcfJQmjzRyw/awC+Qj5HPxsX/30JA+tbpXdnZmAiEA/GE50LwETcQocULKWKMXVUulxInT7UMEW+UXl5d3hbk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.9ef2e7c2.0_1602029711623_0.45382473286744385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-select","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/floating-label":"=8.0.0-canary.774dcfc8e.0","@material/line-ripple":"=8.0.0-canary.774dcfc8e.0","@material/list":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-floating-label":"0.19.0-canary.96c8bdc1.0","@material/mwc-icon":"0.19.0-canary.96c8bdc1.0","@material/mwc-line-ripple":"0.19.0-canary.96c8bdc1.0","@material/mwc-list":"0.19.0-canary.96c8bdc1.0","@material/mwc-menu":"0.19.0-canary.96c8bdc1.0","@material/mwc-notched-outline":"0.19.0-canary.96c8bdc1.0","@material/select":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-uqsUHf2BL0AXe+orWTrAr/C/HPWNO7akSXDwMloIPT3MBF+jUj8Q4ZJtmcClE9+KtUrfDuJuRAMl+F83slYzwA==","shasum":"a478980f4c0597796a3b5dcdc1f06db4d3edbe1a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0-canary.96c8bdc1.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiA8CRA9TVsSAnZWagAAKvoP+gK/4tpFAy11ebsmT2ft\nFWjjF+jaiS818QVZGtzd1YyowsIEO+uUYga7y8ps+8rdMlXvCW3rb5OOzTSZ\nZrxhhLYcpy8uFTEOF/cO4AWO3KcyzwqUEiGYhkqqwYLzbDQMp7zd+IhSYJpp\n9b69TQ8yCeRm2z4Qxy7TGLD8bmy2NwXb9iPnLcu6N+YX8f3tFRzdNsLMMR+x\n+gZQwWchKpbgEGJ3nkSO1AfOlxnr/4lLUA4EcRlhnbhNwumckkmxDF51H3Rd\neT40phKJb/GpMG4Swu/5xTA1Fz/y9RZ/qP4J9F5DS1fgOf9+5jJpIrO1ZwOQ\nHw693XZ1P2DB9RZStEz6ed+hGGDluE+khgyA3REoGujFp9y3B7KFOYCA22Uv\nTLDOv/NhSzprLLip70yQEFq5nTR145qRCp/vkrA9LuaGqE53nTquAZHkZYBc\nMy70CxO7/pcdAdQf6/p+UexE5zxi/1/RKUqrBM0lzyhZ2u1rC2cD1b+/9Tjj\nnsS/0mlFEIQlAjEe63BdaobEKoXjiFiC7MCAAEEfB339ghcJbg2zELrDYFKk\nqty3NohK3ONCAi21/KyMXB5mAfFjxRfn53UNQJcXABF1xLQ2QTdnqVK7pT7o\nbM9CRiBHQR7YG7lCxSskcp2sZXgYwfxFkikD727sMJyOv4wivU5SHg5DseZg\ngPBU\r\n=RobS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsAlmZpMeW8F5yHLa/qB+bVvRsl0ysskIkZ1OKJ4jGKgIhAN+LGhz6AikXzP8cMbz/x/38DxsvAsulGvlLcVyAXNiD"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0-canary.96c8bdc1.0_1602101308349_0.9980749430402396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-select","version":"0.20.0-canary.6c21f034.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/floating-label":"=8.0.0-canary.774dcfc8e.0","@material/line-ripple":"=8.0.0-canary.774dcfc8e.0","@material/list":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-floating-label":"0.20.0-canary.6c21f034.0","@material/mwc-icon":"0.20.0-canary.6c21f034.0","@material/mwc-line-ripple":"0.20.0-canary.6c21f034.0","@material/mwc-list":"0.20.0-canary.6c21f034.0","@material/mwc-menu":"0.20.0-canary.6c21f034.0","@material/mwc-notched-outline":"0.20.0-canary.6c21f034.0","@material/select":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-W46U41acG8ZmpnSp85u1K8YMOew45zcxDduo2t3lHnUdjDpQdg17Nmg0wrL9BI/ZBYyOLDCWoAynSDYnX75Yzg==","shasum":"ab314c75bc1ce573f3fe54ca65f3e6868fecf21e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.6c21f034.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkG0CRA9TVsSAnZWagAARqcQAJ9SmFn9U1OrEQ6j9KIH\nLuQKRx4EFnHLsXkLo10XfmnVJnLB+dtUp1lsE94EB7r3vGqBfIh4UTg+QFjN\nST5nyJifzgQ3EVXo3kL4/sl8fLGWomyFqLYQnDKlWNk8oCVGGFqc6mXVH5b+\nyIG+u8e+Nk/p3YpR3C6i71Jh0VmdDjCssSu1LvvbIkd47OFjvHjoGR2BQsB2\nChkprBrCTeEx6zQVwmueRV7lFvR4ferxGIcmR+vwP8XuAbVyd/IYJcTASTL3\n2R40TzywAIkbC/JbL4Il3jihb7cdDRdtG4GEtXLYHmHNc1xgwYIdwHC9ozS2\nG3yATTUeTw568N0Sqq8YstbRUMz4WM9dFKTh1NYY4idN28LXuR5mE20/s0Di\nH7VjEDjyJooUhdtukjoR+rJiBGycoMioWl4E/ad9DJFLHVEHoc51Qfbcb54h\nV+lju8R4mELVys88+fS3eBW9k3W2B1O+JZY55uwgL4lW8Rjt/vEtpaD6A5jF\nLfsxJzyveSBsMzxi3TR8l3VIgUJ2vBnOcVeugfCglr0b1lAfng1cQJT1iy5a\nvI/PU87yJAw9Z9W/yU4Tf4ZRB/rm3mCvHuvA/G8C3OT1/7vFXMCXkKhEvOL+\ni0uNQSy9OP7MoJn64veGIPVHmSGEWQeP3y6wXWEm2JBJnVPEJcnGF1psplRD\n6biI\r\n=h8A0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDfXdNIflvp+cY97N681DFcqSZ9SuNFjbE61gUYXwQGAIgNuwdFn3uuW/eA8h0Af13vE3NklJrVKG0E1zZ66AsTko="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.6c21f034.0_1602109876037_0.08700496766307309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-select","version":"0.19.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/floating-label":"=8.0.0-canary.774dcfc8e.0","@material/line-ripple":"=8.0.0-canary.774dcfc8e.0","@material/list":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","@material/mwc-floating-label":"^0.19.0","@material/mwc-icon":"^0.19.0","@material/mwc-line-ripple":"^0.19.0","@material/mwc-list":"^0.19.0","@material/mwc-menu":"^0.19.0","@material/mwc-notched-outline":"^0.19.0","@material/select":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-dRzvDuw1ua549heGEjzcCJ50JFZEaC2kzFDUNNcYZAXSLBwQnreYXygnJgpOqA+8r1yrvXQb452PAwwG3lT7jg==","shasum":"c70a59e9e70724dc16baf0d8a874d2afc4d0e973","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.0.tgz","fileCount":13,"unpackedSize":199674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkJKCRA9TVsSAnZWagAAWG0P/Rv4noePcteZ6xv817/K\n+fx+WJcElI4/NS+KHEzlqB6SKVLHIr6NEvWwhEev9oCLsW0hQbJOfeZic7mp\niXFd6xgovHsX/NATVTTtNSO0trazMFOmItJrEC0cwW2rcAVb9dhjIJYkQOrp\nM2iQM7opj6Y/xHBCb07QyBLefU89niWkDUG4RkWNB3s8nhYYfKHxd9+koQj4\nND2xhqlwdg1Iw8j741UYazMQxdYPVDVRS8yISOqNjjgNbdmhZ9AzxiduHFbn\nNMetv2dm2ucXYOkpIWItSBeVXgRfGhORZsRB7npGlXlZFc4Ie75btn29fCYa\nWufSFQjiPSOgKO62dl83Mc59HDO1c2/wulil4z2ekdYXnE6bXAQ9n19tiPl1\nZIo+38u5mjLsVm/Xo3adKA/pEXAHZ5KBJySomWtD+kHZHTVR+RX+gRBQggwu\ndAFo5RTrxb6hKroOpIvtesB4T6fYT2mEaws3R0Ig0M54ZBk3HExa9Qc0wrxI\nJuhW+PfukItAs06C3U0mlrD6YPMDx4K6o3SAW3O4iXJU3kh1+HtBE06DeNhe\neFuJ+qQjPT9pHOXiHBFv/rTD+4LQj3cXAHk1Eynm69YNP7roNlHcKDISFh9D\n7aBr8J01bn1DSsSIWtdSkzxAebHWtF3IVC+PBRL9suq3/ibS4RkSzeTAElCd\n+v42\r\n=mMrW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3uI5GF+r4WXN5IEdZAnw165dTQEhiFqTWEs2+DSdVYAIhAK6AjPbu4xhctRHFnkQCUkD4Hzm/zQcEj8F3+b2NZOn2"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.0_1602110026443_0.6292962480386097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-select","version":"0.20.0-canary.1f026aaa.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/floating-label":"=8.0.0-canary.774dcfc8e.0","@material/line-ripple":"=8.0.0-canary.774dcfc8e.0","@material/list":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-floating-label":"0.20.0-canary.1f026aaa.0","@material/mwc-icon":"0.20.0-canary.1f026aaa.0","@material/mwc-line-ripple":"0.20.0-canary.1f026aaa.0","@material/mwc-list":"0.20.0-canary.1f026aaa.0","@material/mwc-menu":"0.20.0-canary.1f026aaa.0","@material/mwc-notched-outline":"0.20.0-canary.1f026aaa.0","@material/select":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nYH7QwlQA4ScH8zNZZLbCzQc6aHz8aF/8KYxtRJQ70j7N1lklUoH+pDQ8VWqksP79HVBvN205h2GWaQOzg+Y1w==","shasum":"7e0109041c4838ee6b51b94c7b32403590aaaf2e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.1f026aaa.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5ijCRA9TVsSAnZWagAAtGIP/jqHJ2Wz1UsjCK/yP2ZS\naGoNa1ly3ZVgx7plyYdq5dP0Z3zRyacujOqMFO/5wF6kBhNZx4NkprVuBFUK\nbmFU00Cc4N5FVBXjxpLYl6/BqgXMZXCnWXHPat+rGv+Kww0chJwarliVEupA\nKKwl34yks5KoYXLrhxQ8h2BhknQy2fsMG68KFMqh1OO61DNlsIO2/Riek7xk\nOhPbgwbkpSChDkHsElxw7ZmEfse8dsaZrf3ga+TunmJUDeJX+sZMvauDY6lC\nDZhtzDfAlBJWD0J2t2yQ2/dYP8d6LNV/ktq9C0NrNtQUv9E2OsuCJ4bsWxvs\nE3iAREf16jPrpHNcIzp4nhh3faNXJY1UlWeP/XtiX0b7qTkgxKB2piRkP/Ph\n3QtNdr3Y/3YeBvjj7144at9oGnrZkLJ2DAdHQADzZgfzrjdMmRqwnOxmLmkY\nttGgknc8ilxYxjov4eYHq5XzQK+uDeDVxhPTanwjAD1M7VlaoeHkVcm6zzcR\nA6Sz6YkP3Rv5r1Z9lLG3Jg4kNCgbfRJUBgs79BfTd1bVzQnLLNWNWPL2ET6C\nDSzm6wj9b8IZt/2V8RDgA45VfncC52iCCL2DWRTXMgqtWf6ngHKgO8yikNhS\nBSXlyoEzVsBcKXLCANmsckV8dbsU+e9l1qZIMjKFxjjnDQY2R6ufpzVbFOEN\nwpxY\r\n=zA5K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBE3CF1008YZBCKhp4ZpADEoxaz2rOzsmcQhEpBuNqoJAiEA8HDmKRleiOHw5oq91UlmNRlwjBvn5reB8033TsgxwnE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.1f026aaa.0_1602197666647_0.6627565708336693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-select","version":"0.19.1","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/floating-label":"=8.0.0-canary.774dcfc8e.0","@material/line-ripple":"=8.0.0-canary.774dcfc8e.0","@material/list":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","@material/mwc-floating-label":"^0.19.1","@material/mwc-icon":"^0.19.1","@material/mwc-line-ripple":"^0.19.1","@material/mwc-list":"^0.19.1","@material/mwc-menu":"^0.19.1","@material/mwc-notched-outline":"^0.19.1","@material/select":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-qOrXC/QGydbD5YD7yT8goDEXRIzXebOumVxXVgENt7q65nFirV5DiAgC2ftj44WBfcm42yoAWIWEwXja0MCMng==","shasum":"88f568b7b2401f844d643d551dc660a1801ca61b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.19.1.tgz","fileCount":13,"unpackedSize":199674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5t1CRA9TVsSAnZWagAAtwoP/j0IvGP5dODzf9lK6SG7\n2KweEwN7/FY86dhgoNdTotMq02XyctSz4ycS98p2LRV/8JLlTmiuP+cHMxVJ\nCA72i0KtbAW/eYQufBE6FV4izJAHL7JzG435LaAXk+OGRSg5Ex4up0fpKXjN\n3gnrvCtQKYmwCn+8cowIeziq3QDVvB0+NuvOhiFsnO7j9rbNtveeeobGi7H3\nvPCN8sxCPvWcT4aRfuAtCrgOz/bmzlManhooYSKojxBfGBfow+7R6TSMKi5F\nrUpg4I/v8L2xGqWZBQ+LRMCXWyx+Y5Qm62tSd1QhJ7VqP32GyKMBgj4rGnBF\nDGW9dTAkW4mTEvf7gWKPPHqJSAVYCW6UbWD7mKjDQYvHSXHN4ctth0O758eq\nVEKFlGD9Vc0lLJb4yncCgwWQzXJ9Bc81MdXmDa4IYG18eQAsfoPeG8DFJK0b\nRTpE+XbBnn76N2Eumzpd0r/flTzFhLxHWl9I9rhIqNg2UA9KTwsZUnlGSS7z\n2PgSePfpOmN9CRYdgbvJyZTiPC85kgJmEvWvdMieq40vOl+Tsb7JaXdyQSSJ\nDVFah8qHAHWJChNPaT5Z8OWFCJsixtyHIpnz8V1FO3Jbe0HBzOJXEOHXroxq\nhNJMuDuGN1AafpwF1Zi75LNKo0OR2+l6DU9pjB2pGXYkYW3P7KJGoIMSdy7Z\nqcX6\r\n=6Jzf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEwRrZx7rqyhw8PthWUGRDtUa5Cc9byioAmGWho0Y04DAiApr1V5TYr6C49WIPSqV6wGWAHzJFWRVxHM7oME633agQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.19.1_1602198388921_0.6765051574179692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-select","version":"0.20.0-canary.5f6894b1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/floating-label":"=8.0.0-canary.774dcfc8e.0","@material/line-ripple":"=8.0.0-canary.774dcfc8e.0","@material/list":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-floating-label":"0.20.0-canary.5f6894b1.0","@material/mwc-icon":"0.20.0-canary.5f6894b1.0","@material/mwc-line-ripple":"0.20.0-canary.5f6894b1.0","@material/mwc-list":"0.20.0-canary.5f6894b1.0","@material/mwc-menu":"0.20.0-canary.5f6894b1.0","@material/mwc-notched-outline":"0.20.0-canary.5f6894b1.0","@material/select":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-y1dE49Kl/Yv/I2Fn5zhZMou69FG2TVEkf3BbrK4Fk87rn6qpABx337mX+NnJ7O+n7X2eEIO8avnQoJdSDq897w==","shasum":"8889888b6ce5e33a7b5c8cae545f28199a87d1d8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.5f6894b1.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5vQCRA9TVsSAnZWagAA3I4P/2xKQxeaZLwxm6VFTLQF\n+YEffirFf0FX4N+B7cfyyFKu5G2epTVIxHzYO+yH7tYAvQLR7hn/TddFEQBd\nxtdrxXeaQsHlJeojmz+N4Z61jKDAQ4AYKxwWFnZ2HBc08QLx57oeM5pPp+TI\nojzhvFx2AILR/w0dzMflk2Iuc8WC2hFTZl6iK3DC906iqQ6cLFWXs2jALmyj\nfe3nX8A1CeeYPQQFINvneZGFH7K1qTYjOfSn2yfEo9k/LHTvbqzlViA2ZXLd\ntYsVnn5FnS5lunJ4sBAtJuU17PkVMDOsTZpzz7/l105OYV8IzPtlKILd7+Xa\nE4B2KUlpOR+nUkSHhsuS+OsheJ22qb1alRWVPE9T7tgOYOTN1z9WDZ3ZxxTV\nJnBSQgE9tQjnSPIVNKS5HwUWihj92qLasNoWErvHeE+qS9J99Lm8V3wwwAPO\nPFhMxEo7+eAu/DuQvp3+QFziqUzvi/a5TAaIZ1v0zZg0gU2GbBUw5idnGsJp\nbB9rz8qLdM6OO3MUSaKKcusMeHIje42paRvWBT0odfDFm6UgrYc/GxWSXCmF\nQu0goB+d9bfTaQajCuNalhEcL5NQz/sOE6kNfKyq1xKUPnoKsSn2TKo5B9j4\nMlLd2xPpHhiGoRaehGfEHvUU6peJolBS4eyqyHeOL7kpsvnj3hgyAIu1qw6/\nWun4\r\n=mwnx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfKkwnzR44mnmd3X82vfl4S4fLIZ8S0Do8C5bwuETG6QIgQFPNoV+gnGI2bAgF/odiiMsWajyKQlWUPqOj4IOjpQY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.5f6894b1.0_1602198480443_0.2617080587242413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-select","version":"0.20.0-canary.f6260d06.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.8a39352c8.0","@material/floating-label":"=8.0.0-canary.8a39352c8.0","@material/line-ripple":"=8.0.0-canary.8a39352c8.0","@material/list":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-floating-label":"0.20.0-canary.f6260d06.0","@material/mwc-icon":"0.20.0-canary.f6260d06.0","@material/mwc-line-ripple":"0.20.0-canary.f6260d06.0","@material/mwc-list":"0.20.0-canary.f6260d06.0","@material/mwc-menu":"0.20.0-canary.f6260d06.0","@material/mwc-notched-outline":"0.20.0-canary.f6260d06.0","@material/select":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-fMsR6TIhkoiPAdEDXNGmYDU8TCOhpFvWW8RnoJYjrG6UQpUYFrtdHQkXdOV/EyxqwStOEZ9bktqZg4FwbMWGmA==","shasum":"e6f088c709f0e9b02b04a7c93e8b28c731b825d2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.f6260d06.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNoXCRA9TVsSAnZWagAA37gQAIYg9fttrFbC58L8Ciyy\nr47EZgcgSEkYUSVycalRLtnGwNt4pJZUtSnBeCUp4GRCZeCBXHy+aA58KQWr\nMhMecpq7C5sOYma3mpE1EJGDvhG2noXaZieiQAXZE8eHFPgzXTHbMCXq7Jyt\nXq7R4RI8hPptMqhtgJ8kjSCPyAq6/etUN+S3WMYs2GgkGkzzGUgI3UkQjdSZ\nSAySki6Au+GwDcjqp8tzWt2ePJuPplD5MjeI2Y8XU66TXQjA0ZBr2MDr2SRB\nxy0EeheXUknGWlHLuc5lmZIRM5wFnQHNXusRkZMTlPigttmm7V2KU4X/GHEz\n+ANtZB5s2du1wkm0YQA2mXwhz0y8Sk5w9LCxiRJftwwp+teYyJImiYx/lawV\nupUJ4W4M3QMlkCK6joQfefvfVB1WqtkDSJdzfdnfA9M62xpPo+/I1bsiEAov\nxxm3WZkgdBlpibxMSp6Ff7PQsTSVY4C9rT9/zQTxHmVDgmT4V6Doal5KE4v2\nLE5Aqtr+Y6N3zhMqPgfteUQgW8nEGPcVlmqdvcsEdAP6tlK4rdEj+JEiu/0S\n1LTiKgcp72PDxwu4Y/H27TGcxQdsJJrkeGCBPSeLlRmVDr4kX+RApD5u3tU2\n/okoxcoUV77XvMNwqbJE6cSTd24ZspSJ6UTtaiojkP0VVbs8IHHcxZnEYV7i\nYyKh\r\n=6hfj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCopgxBJ6YXj9HP4S4PkDQ0CFf4TUM2JHIEBR81OaBTVgIhAMC0Y7ijKMlHiYIhXIaHTkn6mNdwHrs5SHZQm9P8CpvA"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.f6260d06.0_1602542102780_0.553908000056148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-select","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.8a39352c8.0","@material/floating-label":"=8.0.0-canary.8a39352c8.0","@material/line-ripple":"=8.0.0-canary.8a39352c8.0","@material/list":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-floating-label":"0.20.0-canary.2d1b08aa.0","@material/mwc-icon":"0.20.0-canary.2d1b08aa.0","@material/mwc-line-ripple":"0.20.0-canary.2d1b08aa.0","@material/mwc-list":"0.20.0-canary.2d1b08aa.0","@material/mwc-menu":"0.20.0-canary.2d1b08aa.0","@material/mwc-notched-outline":"0.20.0-canary.2d1b08aa.0","@material/select":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-qI/he+4uRmAn9Ukzi3T55cIvcc2hK/rTCi6uNpH9CV+Ua0+vbZw8+oKCnXTdVmdkixlvlL3psPIyeCeD1F7y6w==","shasum":"4ab93bb28f7e852167d9df8a49489b3f71407fc4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.2d1b08aa.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf6WCRA9TVsSAnZWagAAFXMP/A1bkF4ywZepB1dHWY1C\nAZIkQ3Rp5Er0GBqCsTY7UwD1dfhMAKoUVy0WH7dCyU1+LJuBTN2TONdd9Dx3\nVdaVGilc1h8M25Rsn7rBPuccvTNciFc8yAnmHr/my0BWcCBn5A5BTzgBTpNz\n2nUnpFZJPdxxRKPDjWd8cz78e2kF0ajlvkSvCj0+IMkSJ68lStmRMZxsOfzW\nLZyfrlrQtyO8wDPCMRbVVFA8TRVh+L6PIxVwYBFoi+Ea0bmwl7ue3CsoRK0v\nQAxSDkSx77wYJWWYu7BUEgLCYmtO9qot0bJCLpbQCrZJwJLPAhF2HKxJzwr2\nwNilIghgVZDPa13UIbJQw4hVaA5eNENzEYj8DMX73f3l7u/0Fi+o1jBubrwk\nqPPKQ15uJnMtS+uk9Ey8Pa5/hzt9UuZLDVOmLND1OCf3bB1YjZVv/LGvy/sF\nKGGTaq2WQmv22lik/CjXSltYQDLmzYqDeKQR0MESjzWTJn3z0Vqvp7tV6iXu\ndgqEDKrHy4r6A4GFWlZQKtUms+JpRGCy7xh0pHlzxTKaNwvFk3Tpsvn4dWsW\nEgAX57zisTshmDcCvezR14uiqo/TvCR7L0jqCvx7RH0/C208UKu6Ru6cl8wq\nMLJhYsYQiObv8liwOCd0ewcO8uzlYCzHF9pA69OJaZL1lKE3qrdBZSTkFM65\n/2Ut\r\n=kZYq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkXJipa92Afru23KenF9W0Dc7mPpiz35E6IuEfDdZRTAiAL16oT5mOHDi3acs4oqOauXzH0BoYdH+tVjbzZcJR5Mw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.2d1b08aa.0_1602616981974_0.3204279204523943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-select","version":"0.20.0-canary.5bd58844.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.790ca85fd.0","@material/floating-label":"=8.0.0-canary.790ca85fd.0","@material/line-ripple":"=8.0.0-canary.790ca85fd.0","@material/list":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-floating-label":"0.20.0-canary.5bd58844.0","@material/mwc-icon":"0.20.0-canary.5bd58844.0","@material/mwc-line-ripple":"0.20.0-canary.5bd58844.0","@material/mwc-list":"0.20.0-canary.5bd58844.0","@material/mwc-menu":"0.20.0-canary.5bd58844.0","@material/mwc-notched-outline":"0.20.0-canary.5bd58844.0","@material/select":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Sn/pSgmhzP9RF6OJrLVnf5DVtzzhtkAkQzd4+COQr6qL98Sw/nNEiulrNhxyydhtQOWkTU5ipFFXxUu2+fLmpw==","shasum":"3686be955abb86f097878af4708ca46e20c32a53","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.5bd58844.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjx6CRA9TVsSAnZWagAAHlcP/jm9OBYyq1qMMeYYDkV5\nBIT1m4t/foFeE1+6p7yfYrfpKs8DwmqDeKyby6D64MoKgYoMHGHcU9UbLDxp\nZNwaBfr7E68OV7rXO9Os1EPBQmdcDNLZmOCysn4M73EHKPCBgl10w8s65Ixh\nFe026L4BgDRyZpiQMufJ9tAQ/z7iBhPSwZBhyWwCHc9HFyGTZWJhxVvM7e9Y\nHKEAuiIR8FhkGgL+eQnouIZOoSzpd0Z9nCV2WPhy0QLVTM3YDiqmg+JwPDek\nQu+LIQDiufT/DO9krA0ChFy4SIxgcmr3bzp3ABfiF0b1yGJfJz4c0Hhga3IN\n4HB1KvUaF8wl7PGHklKpyKRRfjz3cioDavHOkP06KU+q6vOtvkOPpoMNkU3n\n2pYQsXi4eFwEg/3Rb/66z14gvd0tf5HVbhOa9vTpV7pB5u3clgXV9TEu2wbH\n4PKfHTwif5FkSIUiB4fl5yJJ/NjRCkOIaZEEtT8d1LXM/eryJ9rODAxuIWsZ\nYYze5nesB8tdCyRIrwNZVFM7uwSod2kOadZLVSUskid502xYGUH1n/NkyL5w\nMNO4Yi25Dzh3ffbBU9JawpWN5GVCFTLO/mijgruGdADYfNuUXE1R9h6sX/4B\nzJr++HD4LnZxjlTdAtMs6+uoNNOuYgu7vyyuo5R/OdyBzMxoBqVKlr2uj9q9\nYbVl\r\n=HJSs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC46y3fssT/HoyKk9RM7uIZlvNDkfQzlr/OpP2SpJtqSgIhALDGpxylZ6EsSWaQpAVLN2pc/Ro3EPtTOFa5dJ1yfySO"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.5bd58844.0_1602632825920_0.07090565060269283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-select","version":"0.20.0-canary.bc846b29.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/floating-label":"=8.0.0-canary.c71ebfa02.0","@material/line-ripple":"=8.0.0-canary.c71ebfa02.0","@material/list":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-floating-label":"0.20.0-canary.bc846b29.0","@material/mwc-icon":"0.20.0-canary.bc846b29.0","@material/mwc-line-ripple":"0.20.0-canary.bc846b29.0","@material/mwc-list":"0.20.0-canary.bc846b29.0","@material/mwc-menu":"0.20.0-canary.bc846b29.0","@material/mwc-notched-outline":"0.20.0-canary.bc846b29.0","@material/select":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-FR2aLy8pvZ3WU+juyuOPqSTBz9GZaUd8LwYsz9Opj15CyISebI67p7HXst29O7la2y2LtddxbgTUuvS+o7bVoQ==","shasum":"17105ea1a251bbb7f186bcf72105a55bbe15183c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.bc846b29.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0CKCRA9TVsSAnZWagAAxhUP/AsITdUEm94cNedCZJW3\n6GQXuDHMHiJn26sIv68s/bhSrdhqfdfEFMa3oh0WDJBFoZl8pbGF4w7HaLlY\nEmZZk3jEirVziNHv0nWiu7hiHwQQ22Y10P1yEl2Ntnh4yo8oyfWFpMjIbCsL\nCogRqO5M3QgtzkXbz7UyMwhwICDQe6CFFFKDV4L8H7QGlGm5Nwbpsn1aWfKz\nrAYzWHIwEigkUU+qgoCPNLAig6OfAH+BZTEdTkR4Q6Wy9TPiWU3/dRi/xsXn\nPhk97a7gI6WHoQjl+Tfr2alNVaKFRqVEcyDqIpDrKHhG1t6NgFJQQ18oNE8L\nL9nfIKjEgE+khogwcBIjbt+Dr4rEtNsTqKP+6YdIlfNN2JfAYM/ouEtenBHL\nnQUCAlTZcdBeT81upL5lI4gl/YxFV5Qha756WsbFC3i31zJiaIIE/VUuZ0xz\nqaJWYl0LZvqb99QruUksydGR4rUXQbpsBCFvUJMvAvilP9GOTDUrVwzVQe30\nlrJqg9nCfYlAUoVk93ozAFBJcDhpYd7Ix69fVt8TgzOg4RJptsBiuqm9sjEK\n1CNxbMD5b+64jaXyhsYBEsA3/R33XpwV+pX5dGmfM8yicOFIa8+eRrDB6zbI\nezlZpl9DTqokyKMcembk6kORSTbL80hQPkVItluhNQVsmit8+qQbsoR96Dg9\nq4k0\r\n=p0O0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEud01HWUCfTekwsIeOuTSQ+Snp1BvMyEzAZKVM5RF9BAiB78LLprYPAX40xmOTospLWasuuTxkA/eRLhTU9Wp+Ceg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.bc846b29.0_1602699401702_0.9322152668980228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-select","version":"0.20.0-canary.3280b686.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/floating-label":"=8.0.0-canary.c71ebfa02.0","@material/line-ripple":"=8.0.0-canary.c71ebfa02.0","@material/list":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-floating-label":"0.20.0-canary.3280b686.0","@material/mwc-icon":"0.20.0-canary.3280b686.0","@material/mwc-line-ripple":"0.20.0-canary.3280b686.0","@material/mwc-list":"0.20.0-canary.3280b686.0","@material/mwc-menu":"0.20.0-canary.3280b686.0","@material/mwc-notched-outline":"0.20.0-canary.3280b686.0","@material/select":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-qc1HOWxat9BMZtX9r/gSRGBfN5/RZT2rFJhHi7Qn26jqMtSZZR0HIHO/cbFFzTmTa61+Ig/R3dRKvXRFpfXTMQ==","shasum":"f7033a165cc6316b1a9e4069932e6cfe31d214a6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.3280b686.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOO8CRA9TVsSAnZWagAAPm0P/ApsB/ZJE8x/GUehoths\ntAgvxlxdmdHLwug3pO6fPDYhwvARJx/Ert62eMIWJl06i6CpKpAkdPANwVdL\nhtL10s2JSIaThlcW1YEMXketDNtyxi7RuumFdjW43u5JjPbfwdrmr+IJ7Z+2\nHXeyBqclmTcPQNvckcS1YqeFvayaqrdOXVvP+puPA/M5YT2m43NUuzzqZ4/L\ni28b1PRbjX6PRbQJ74LMI85ZLg4kPWziNZ5XqEzfhwP77YL/qHkoyHin3YdW\nz6Z9QS+ddOW+UHu1xJzSb0qhXyhlgFedc6xQEc7b2LVV4fQSDKia6xipKDmH\n2ENpM+bfo43UYpnf7uazH8Y+IgGiVuB+49fQtWV0irmkjkTfbmzvgSCElh6j\njVS+iziNTdJfOOD77+weXwzvoZCvNwBe3DQ+lpSHJf2JeGX+LEBxxjlpwH4e\npCrOhmUI7CXw0p26St9o2Bbfh1NVLh3fowqXKsnBBPUP8PoPWT7jcqogQecE\n6XMWGVk+q6ulvvTv6k/EVNS+OiCxbwn5Qgyx84JfzYhYmi/KEbysiC8Dn1WE\nlhKDExX/m767T2QHk3YePEOWfm3xUQq2owpZ0hdzcFTx61ggcIhhtz224ScQ\n3rXabAgTEjFkFDWZ8NAhBK5gD6tqCI3jOlwBhwWGhcU8DnTH+1WTJyvvfCOR\n/jCR\r\n=uPvc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwaKJnRU8fASl8BrWmAieNBVe1ioymHzrSrkgyfL1VmAiAYNkKAydkBff6r/SB31ryJdK2zXWh5voD2qVodB/u6lA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.3280b686.0_1602806716123_0.503753076969168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-select","version":"0.20.0-canary.9e94cd38.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/floating-label":"=8.0.0-canary.c71ebfa02.0","@material/line-ripple":"=8.0.0-canary.c71ebfa02.0","@material/list":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-floating-label":"0.20.0-canary.9e94cd38.0","@material/mwc-icon":"0.20.0-canary.9e94cd38.0","@material/mwc-line-ripple":"0.20.0-canary.9e94cd38.0","@material/mwc-list":"0.20.0-canary.9e94cd38.0","@material/mwc-menu":"0.20.0-canary.9e94cd38.0","@material/mwc-notched-outline":"0.20.0-canary.9e94cd38.0","@material/select":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-G3bIU1pQE6ZDEC5T0++JhyWyEY0tg/mwOvKbPk0Mt5KukPGqrhR8lh4lBEgLd3plh2Ioi9XG51VxnP2I7orLpA==","shasum":"8a055214edbb20d6a43d52db5f41d16bdc233cfc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.9e94cd38.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig1lCRA9TVsSAnZWagAAWXEP/j32jo17m26xq+V7xslx\nd6lfPybCpmkirfCkPhVID8mjJ6ncmxE3aBxA+/ZCopNxhagsh54vZRlqZbNP\nWcw4UP+fo5NOHk//gA2PgpllVnWzxXB83Yt8ZrZKMZKG+xrvsVn8qPtzrugJ\nmnsJEi7rpaSKGJDho5cri6y9yGfCl7EZLKW1vyuvKBzsAZ2S+/zunQM2bPkJ\nqzxCxaXSvGr79GWUc+scIuTK7zxtu9K88fEWD+eaow1t+GisthfehzHzVhJW\nSoGEkLmhbyiQBRdeYncGNtrdMMR15jB5FpitpqfFfq3TbW56Dl/+cPL3sDSS\nEfV1ouZFuu8CSUl6tDddFMCRygiHCtQ/pGuidk01gqC7dTnVVTPxfjKyZnNN\nZ0lTLPHThqQtsKDZgkGseiTcp2O2u+j6KSkEYShPe5Pz8db7IRXEoMQjQy/e\n2ngqaqxYPO9eC0zFpR9Fe1c1ARdghn6ArV9hb/GE3v/y9iUy99uWOsusVQqa\nci2H1moic36sLo1E+apgivZ6580eWGC1PjcKpJQlIKi9HBCwxQHyfC5EtmE1\nxEB57q4w69bcz2NP9/R5HaCEqVeJHfAOQ2Xe7MFl9zNEJ4L5DcRJaGT/S+U+\n/4M7rFGQcWPvCDrHUq76aq8riP60nOKkMrqx1mxvPwVsOrb/bIWtizDHBdQc\nSM71\r\n=hsyp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGayl21t6LUxeoTaRKDYPyo/mj0uY/wV1VwBvfSSRGXTAiEAte4ye24gHHIoQHkl5i9dBGn34q+Fx1/YtXLKWXwB49I="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.9e94cd38.0_1602882916747_0.35932126382635166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-select","version":"0.20.0-canary.4773c773.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.2ab716cbd.0","@material/floating-label":"=8.0.0-canary.2ab716cbd.0","@material/line-ripple":"=8.0.0-canary.2ab716cbd.0","@material/list":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-floating-label":"0.20.0-canary.4773c773.0","@material/mwc-icon":"0.20.0-canary.4773c773.0","@material/mwc-line-ripple":"0.20.0-canary.4773c773.0","@material/mwc-list":"0.20.0-canary.4773c773.0","@material/mwc-menu":"0.20.0-canary.4773c773.0","@material/mwc-notched-outline":"0.20.0-canary.4773c773.0","@material/select":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ol/8itbvvyKArNHt6dWwb+AQ/rmyhv90Y49cjpp0a2qtvpec/KvA4Uow/vNvh5+zQiutA9DAabcEMb9KNbpiNw==","shasum":"761c56d16c93a77c8031fcbbfa4467b8cd2d907a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.4773c773.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiiASCRA9TVsSAnZWagAAHu8P/1GRgUsQGB0qQAPxTOk3\nd7WAe83vqCwT7VvQlp5gjvtei4C1JJIhCByNGxG69nVam36B5KXXCjwEEjY3\nBWlZnlczUBq7WyFqmksj5K2BS5FLg7nErIrrlDx5gNwyzCBz4jNt2leqEFym\nn5QnEDkvxJIizRzwdCmcirkkfctxlM3FpC+MpSoYOm3jMC61p4t8goV3odVT\ndSUlo2MYn5brP31SZpIhe6qIr0TYn7N6LQ/dMPTblLLgaFKf64jBy42CExC2\nGkR5JklKTxer4dmGWT7AGY6+LubluBDmQlflSX6uruah0BGYuR4QyewWBSlu\ntCfGU/Re7VTc+I0HXRt8Eq+hxEwDdbSVFxrsi3itWwds9qJLKoE1PWkCt6if\n/tEB2ScvtLk5cfFaL+QX0pl5AEwwtpRj6rmjQX3o/fLAi3xz7uYkyAi8Ij9A\nbcSGy89JJt8yvWYSjSh8Eqn70O8EJsAnR/81dFr+fZYRMierY0iIrauYnUcl\naeLQ3RMU3tana4jYgXfdvXcI1TYrGFmkg+QggsW9L/XkRcYXwqb6/FEr6Rfm\nNH4atLQZv3BoWp7ktfKYoYNasnxZ/lg7WJTtWnjb8PpV+CAxZul+Jthh+Et5\nJdzIUagveMRNZ74jxbPgjyUAY+fL/L3OcnUioWNfHu030JNJHATKSQKzCl8q\n/K5Z\r\n=dxUW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE9VHyPUHpGwXcr2JFZZj6biw1bYZ9Efu41hwWDnog+YAiEAprqZ++OafUgCheyOCLxdtClg85ZeTJCipyPXgT6hmPA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.4773c773.0_1602887697852_0.46500989943477666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-select","version":"0.20.0-canary.65787913.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/floating-label":"=8.0.0-canary.43c1c5e2f.0","@material/line-ripple":"=8.0.0-canary.43c1c5e2f.0","@material/list":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-floating-label":"0.20.0-canary.65787913.0","@material/mwc-icon":"0.20.0-canary.65787913.0","@material/mwc-line-ripple":"0.20.0-canary.65787913.0","@material/mwc-list":"0.20.0-canary.65787913.0","@material/mwc-menu":"0.20.0-canary.65787913.0","@material/mwc-notched-outline":"0.20.0-canary.65787913.0","@material/select":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nQwsvOUtguK7PJHl4OmGZbBB63TrCla3Sj9acFvG82CNg/9anqZgpsLiOot7RMVgjCDeBci5QzkFeFeN6xCGbw==","shasum":"6845f1d39421dbb1cc31c97e1535e8b44ae9ec66","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.65787913.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeBGCRA9TVsSAnZWagAAgcsP/06NKyiUIfza1oFOuKz5\ngDKT+7IuN4buR2yhnkXWNvh/GkPXk/xskdGRz40ChQY+hfiRRid+IkUsPeDw\nvPqzsG4Hqzgkhv4WH4q2w7ghZIcZod9V8d05/EyBltVBe+dit9L/bbEezsSk\n+3zXG7xhq35LQ5H0iFOvv5snfvdb/9kQqadNRkb4XjbNs0Ue92Kz5cvGwyVa\nPB/yFluhmb5kdSx5sYJOgTzxo5gffxQrVEDGAjBckWl6eCTxBd4ZBvZl2t0n\nvXWYSn4Yl8icMIa2sfLKXYnFp/jpmYXK84Pd5mp2XLc6g0AQ+pZQV40VJMRM\nKHKz7LNJlmEFfemOk/RDhFH+41EZ4X1TVVKXMWo9i3IcsYPIM1jBR4d5uz+B\nLTv9SheS1DLFxJ07wpdQYbUg2zosFh/mODMXgT52hansg5BxdDmWYYdRH5ut\nIya2b8xdXNPuUejebBY9ON5ZMTP6SjDyPbqeMuBTjkTDL7PvdTm4zJvwgZnB\nYiMnTOgycbJ5QBg3Z1uUcaOHIAArETVmTK96719gow0BultTVE10/yDdx+lt\n2CZ6IrDm++R0K4zskEUod0ghP8qg9WdBxYvIfF76fdaEkdC5qWON0Fv2VNxu\nUG9leiuVe3YHvvIlxV2IDPk1xAihK2CCT12P3lIiiW3l3Zkc4HAT8/hC0S/P\nf4ij\r\n=D/ed\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuV6P5yZkK30BHRMuHH9KebZywJHcr1ZShkAJ1DcSfPAiAJFsMq/O2KgYLa8ZGZ2sTCRcluV2Nk6U4AO+zki6rb5A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.65787913.0_1603133509992_0.5022764856056527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-select","version":"0.20.0-canary.5485fba3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/floating-label":"=8.0.0-canary.43c1c5e2f.0","@material/line-ripple":"=8.0.0-canary.43c1c5e2f.0","@material/list":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-floating-label":"0.20.0-canary.5485fba3.0","@material/mwc-icon":"0.20.0-canary.5485fba3.0","@material/mwc-line-ripple":"0.20.0-canary.5485fba3.0","@material/mwc-list":"0.20.0-canary.5485fba3.0","@material/mwc-menu":"0.20.0-canary.5485fba3.0","@material/mwc-notched-outline":"0.20.0-canary.5485fba3.0","@material/select":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Mb2WVDTMuPAmaSP04xkixsc1PP5xxt5WTS8RMKVOufAjMuuVaZMomfHaa+wEP48hKr3BcDpDm2KQJalODdn7qA==","shasum":"2b8639cdf18c0377848e4f5993c06009637c064f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.5485fba3.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQtCRA9TVsSAnZWagAAhBMP+wSXYD0hSPIsLWimMEM7\nwioPT5NYwgck+yiuPyzU0hF+oZJRvKKAjUuYjCY6U40T61BikIfBdZ4FwCOm\nBd+DTvmerONQaXMsEhuxcQVAOsW97rQSZvt7Ri41P4LvJ/J3TMdkawKCoFRr\n78VowyToakuQgea3SXkJgFj46Gbs8iVKRFB1tsFkaI9j7eXNNvRdgAnLoGnf\nxLkE/E5jHCmuukUn7JvlkfLnuE7H/zstqhGqwTvDZwHZE84DZ9tSEtCHK9Hi\nY13YDKRbm7Hf80SaC5IdGQ1I6TeWexCaSul5JJgrzR/F5lJyZNw7cv9wvqbU\ndbpAyinR5qM3cDYCpkJH/6LnuKvMWoQVQ4CP3HNzs9d2oJ5JMYW9zbHGGWwv\njUNSWx9k5jeDmTJ/bkecGaGxFV48JnOt8Y69PFarRHvwJIho7wHIr3Zd7AYP\n7Bdg2NvAeH+BJjpSQUUBzJKBfs1h1mX2cgmCiGdsb/Fl/Dm6oOLE/PRhkD+F\nYTw9YMOdbYrJY+sjoDSYRBO6Gp2bgLrUnTKNthx0tx7DvFOpA4XDxida2uLs\nHmDXbDHhnZzJRZ6Atxva/poSXKCYnKkybIhsC7vchAKdgVYAoNE2CuXFN4j2\noTz9fNlUgkw9UIaBWRIANNCVOEU3o3goGTERxDylaVfYapYKS1dzFqIMh2i9\nrtJV\r\n=37LA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDin1RapsSE60E9+La0mw6m9a3dI3iTZU4u5c/J4jk1iAiEAjBXfYSQKMPBO0i2MCmGh8GFRNmZCg/Hf+/KiJso1FVI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.5485fba3.0_1603142701179_0.9702362141016085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-select","version":"0.20.0-canary.a39d0a92.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/floating-label":"=8.0.0-canary.43c1c5e2f.0","@material/line-ripple":"=8.0.0-canary.43c1c5e2f.0","@material/list":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-floating-label":"0.20.0-canary.a39d0a92.0","@material/mwc-icon":"0.20.0-canary.a39d0a92.0","@material/mwc-line-ripple":"0.20.0-canary.a39d0a92.0","@material/mwc-list":"0.20.0-canary.a39d0a92.0","@material/mwc-menu":"0.20.0-canary.a39d0a92.0","@material/mwc-notched-outline":"0.20.0-canary.a39d0a92.0","@material/select":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-oTAJfM5x+ek6C8p6S5uPp47tTCJMBj+BrmxOX9E0iI4vuRfQ4paYxlHHkigKgmsziRBbvuJLU6LCAiKLSe+Kfg==","shasum":"1f5f6ec218176bd074a39c92300cdf99d59e67a7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.a39d0a92.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0oVCRA9TVsSAnZWagAAbC8P/R0dyYhxIZk7SsmCbNsS\nK71iNTbJbceJ3ePT5SSKnYfu0Bkly62rinU+A1pUw/EsaHA/0j+gGNLwXe9P\nTr29lC2TG01mR8OCODt4xSV9Mma7TugY3DJYU2G/z7/wzhC0yynkTz4LyUlR\nou/RZIiFD3D5nCl8fUOfbwz11c8tfQ/kzbPDqjv8izGJwdzwzvHUeW0yFkwZ\njZYVsHlokwa8/XNMKFS8AroGPZLJ5jdkixFew4MVvtlwufTzxo9L+eFYmLnt\nU+H8XwsLieJEmunRCwL2dwxjxjydyIgARoWInk5aZSxhMwDFYyLD3RWzZUas\nVV3PIwoDFcxRq5oU39elGlcBmSKqlhlVzaX3fGLlXMfgb9RTGymR29U2+F4v\nnrg0sewUM8j3vBjPfBZeXD6x65eKfXnwmeGrVQZPuUN+NbZ2zW7xHJmPKnOT\n3xtunvnsnGQmh27IhhTbvaTYy6fop0xHF7D1b1EEWyIsfpQbMD//QhHsgnO3\nhKdnHHD47ht/Hsir4HLqGureH6dBzMoCbcgmpnWtL+4bs0UmdoAy2FQGmJk2\n8I6UFXjRwZc2G1tNBL7C/UcnMoLjX2BflsV2eFLtwXmF/uBp0NFkEXTJggRW\n79OkUuO8fPdclCqq02wF7e6F6wpz+F+9f0yZf7pzw6Roi04IcNe1n5ijiUI8\n3Fli\r\n=Caa5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2LFUSGRjszZ37ALYeRVEp2DHB4HBpfg30rG7A6XPSZQIgFupc5qh0QD2ShCscNFGfnLOfJ7hfT2e0SenIqYl1HC0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.a39d0a92.0_1603488277220_0.11298712386995513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-select","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ccc64eea3.0","@material/floating-label":"=8.0.0-canary.ccc64eea3.0","@material/line-ripple":"=8.0.0-canary.ccc64eea3.0","@material/list":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-floating-label":"0.20.0-canary.4eafcbc1.0","@material/mwc-icon":"0.20.0-canary.4eafcbc1.0","@material/mwc-line-ripple":"0.20.0-canary.4eafcbc1.0","@material/mwc-list":"0.20.0-canary.4eafcbc1.0","@material/mwc-menu":"0.20.0-canary.4eafcbc1.0","@material/mwc-notched-outline":"0.20.0-canary.4eafcbc1.0","@material/select":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-DJlXEKDU1rYRzVV+/3h9AkuXqqm7soZ51ScRzeMC72LKPCIn4m6QH9c6Tcf1UDykL+CPRK2g7uX6zoYQ/JspsQ==","shasum":"e52b7177d7375a3f1f1c22f0f251f0d9470703f3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.4eafcbc1.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YtCRA9TVsSAnZWagAAI9IP/AnmyVkc3l0DNdElXadt\nRPwVDCvc3KWVkCMZAs/WMKnnWJoDJqaJ/jskg9kcbn2LyYTw5Shqv9IBbv0s\nJ3YJmpNSQfOPKgeK4urZU32bWmMfTKC3E7Gzdiz9VVWVkgsSNHDTL5HNr27Z\na/dItRxOdtmhLI4J73GSNXpiG6JjM9TfOhp/hAb6AD8287WeLBSEU3g+I5tz\nGfbJ3A0JcLyiRUNYYJGcpDx0c4wBbeB/2C83EqiGosM/ze/hLD+ohek5vey0\nZgbSSxYlzsR7nMwYxgvSy4eZ/sM3y4PScbw3zE5FXTr+f/5jHCmi5ds9IucM\nJ33NueTwNpUdBMlZsMoAXZwEVTknjZYKqTy8jN1UzIwK22JNhTGL2H4REGlO\nytKVHle67ZsaDPUmkSuWQOCiQtUpsczV8MGzjiewVSCwEwzmYEeEIVlWm7Zs\nCtFM8jqHG61W0amQzWhuXniFpMNNkdRcd1Zk2WlKugtL0UhLXZVPsSGsfG73\n2fM5NwbdOfwJdOWIagTwI++MpHIdamp9Zruf8qpMDUdN/7T7PaF1dqKGuwq4\nC61DrTrcf9gs7NTWt/LwLkl4QL47whm69IpLNv5lsY8f0irVCuBXFQMGMjpb\nBrDB6v3FRBXSbazwKQO6+D9xTxbtwASOxikaKfmBHZNk9ZZ/K7h8UrzQ8QZK\nmzl2\r\n=j5Mw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRT9oI2IjM2rjCiQvktSb/nBLOSGNK2SQxxHoLvjF4uQIgBoC8zlH6FHzlIkGIl+STYmC00/P2nFqr/Tgud9Q/dcs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.4eafcbc1.0_1603761709428_0.07579695963373778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-select","version":"0.20.0-canary.32961593.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a79cdd019.0","@material/floating-label":"=8.0.0-canary.a79cdd019.0","@material/line-ripple":"=8.0.0-canary.a79cdd019.0","@material/list":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-floating-label":"0.20.0-canary.32961593.0","@material/mwc-icon":"0.20.0-canary.32961593.0","@material/mwc-line-ripple":"0.20.0-canary.32961593.0","@material/mwc-list":"0.20.0-canary.32961593.0","@material/mwc-menu":"0.20.0-canary.32961593.0","@material/mwc-notched-outline":"0.20.0-canary.32961593.0","@material/select":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-rDJc9zkZ0m3ddK+lbybnOVMI85o6gbsNGKL6IgzzIPlVMEmmiOwQHsp4EhzlhVD+0ZgHeYyLeuMfNfsStduMtQ==","shasum":"17f9333706a9aac3c76ade6449d7ad61a575bf21","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.32961593.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL3kCRA9TVsSAnZWagAA8msP/3F2SJ4mE2JXTuOSl/XH\nM5tUgfaCGezUqbT8TduUD1uCBEFDND84MjNxFgCn6cjHV4/L7s9QeYqIdDgI\ngUP+6ZX5Gl2NdCpJss7C8Hwvx8SRoqUheMb3dRHEtOeECRG4ZC2cABazBFjB\nuUN/k6wbXGMab39wqMMDv8a8NWeDuYhyk70v0OsxZNJz3PfF8zQCrO2ltxSX\nMntNatRK8tFSn0XlziOF+Ht1CWF9hMylrUOQOID/j9IhOOhZuZ6lwr3dIf8M\n3tiSVn/jo8el/P02qQ0HcuuB6/NQqJmhDsV3QyY8o+yse4O+eYDmubIRANM2\nONomYQZy7YR23BGcqFZNLtcjbNYlkoioUIm6XeWDoLebmzLATwJR/q1dpf8e\nw4zEFXDVenxVCk46HL1KmTHSpqKn4U8jRbCPbz5LbspJuBcHhAR8FnxfLwyE\n99WDCG4vcoNMshBKyxoIyKje6A8KaO7/7Cje9M96AfFHVd87Ta9uBBYC/0HO\nYU4tWK6mbVmjOlCQYhXfIz5lmSog0aU5/8DEPm+DCXhWOuf1utm6B5EELM3N\neYP8d0zgDTIFS00NmJR2R9bD9SyTdhuOguiP8/3M7d61vhAwrDDetmo85cnk\nEPnhXP08bwai2rVtP5xhAUDbBIhgZdgagn2xeOmcKGMeEblnaGL28uT5x9mV\nMgft\r\n=ujar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGtMG6+/keB6FUx1EbK/5JoNxOpa5wGDkzDShsVFbj4NAiEA09TjoWcnX06ZIP8VALYRYueON7AejnXrZgtT47bz+7k="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.32961593.0_1603845603887_0.34024723356548203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-select","version":"0.20.0-canary.8e3a0601.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a79cdd019.0","@material/floating-label":"=8.0.0-canary.a79cdd019.0","@material/line-ripple":"=8.0.0-canary.a79cdd019.0","@material/list":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-floating-label":"0.20.0-canary.8e3a0601.0","@material/mwc-icon":"0.20.0-canary.8e3a0601.0","@material/mwc-line-ripple":"0.20.0-canary.8e3a0601.0","@material/mwc-list":"0.20.0-canary.8e3a0601.0","@material/mwc-menu":"0.20.0-canary.8e3a0601.0","@material/mwc-notched-outline":"0.20.0-canary.8e3a0601.0","@material/select":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-fJLyIw8dEjdziQXS2UR2GQ1zx5f7Uvo/aV1EVxtIgmB2N0uwrVuci92G1kICUw1gJigyXOZFqi/9GYIi9nOGGw==","shasum":"9b3297d43a292e5e079f9cd59400840a381d8e92","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.8e3a0601.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYyCRA9TVsSAnZWagAASrkP/06Gf6Wu+5Rhg021bHxU\nIPY8yY+cqx+VtV+4msN0BJbwOcG1y71iJXAQq0uwB+msmxJ0RmbT7eu+wqkS\n/xjaP1iH5xEmqLTi4pLBCa9oQq+4iIZGLeUiEdGYnSAOKx0WjNbgi5BsBjRK\nIU9hVTcvB50YqzR3lsj2GMUwzZikAftKxOxImfc78acrLbvp7TWnIoO8kTP6\n6TOsfJuICvbos3c35Y3ZpZTjufPX+B+MjbXrWVVr1P1Kzv7lnp2ydRUbMTP9\nTQClk6UK8INxLYuWQmzbglRaCYnhaB7TTlrLRBlvDQr/JrQ/D739m8yXqRxn\nWZjCcQ9tyAeHu6EwP1hM6pVs1zou0Hb4Ayuw4a+PwhEZXdxz7/FGg+FXGZRo\nSa5baopbnOOOi/YEU0rtkBfOLr8uEa4DG6ArQDiBFs9j4opmd+M3yjvPG53e\n7a3ItCCQKAy6qwOTrwMHX5xMROemJORbg/bpPWYOv+7lQhno8GMJFqqiwdO3\nL6cpax99rjnTlFEiRtztq+tdRjXJ5ef05MelaweNwqWKU61NDVIeXFTzvdoS\niie43Jjcwya9Vc8oNLjDpG2vluhHKVe4H7t/i23Lm1Oe5C8VVLuywbxvqG0T\neuBlbEUMqyP3OXk2cPNWc337nASURj84oJnxlcDZjWHxNQtNTcJYRhDuW2AA\nznYb\r\n=qaRs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJcckXUn1YKzoTxosgi6QLjUpjyfFMEHFL7LuM+PchaAiEAnGAelgiGV6AKnlRXHYmRkhDBlrLe2jnzQD8JPC4YBeI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.8e3a0601.0_1604007473939_0.3974287447295337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-select","version":"0.20.0-canary.178c25b4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6d9648ab2.0","@material/floating-label":"=8.0.0-canary.6d9648ab2.0","@material/line-ripple":"=8.0.0-canary.6d9648ab2.0","@material/list":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-floating-label":"0.20.0-canary.178c25b4.0","@material/mwc-icon":"0.20.0-canary.178c25b4.0","@material/mwc-line-ripple":"0.20.0-canary.178c25b4.0","@material/mwc-list":"0.20.0-canary.178c25b4.0","@material/mwc-menu":"0.20.0-canary.178c25b4.0","@material/mwc-notched-outline":"0.20.0-canary.178c25b4.0","@material/select":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-d4Y/BwBQdJqQHMdE55+wBScNVcqDOPuWdqOg40YKPiHXF1gDFPK+o4nubd0yFc7Q4SO3nQHtAiGbnRksOUR0Mw==","shasum":"087a88eaa46ebf2e6aa3a7253a7ce866e70e8ba9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.178c25b4.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzlbCRA9TVsSAnZWagAA5SoP/jNiStujS39yn+PVj0s0\nOsKg5Th8pweuJWJ9SEU89dZjNl73M3pItELinRcoGE7M46qeix3aj/Z//jiR\n3hC2qtNHedNZ/S7H5kjnrnJwJhbS+PqpamLeb16sQabKnHfN3gc738LZW+TQ\n0HgiOQ4w/WAOd23OZ1RU7zz6v/i5wHIGYqiQPbaZf7PCZCKuJvXhlf/BtbMx\nl4aAkAtvYXuoYbKiDOp5znlE8nk1fIPC7ASXdrzTqmxsUR3Z1GXO4NuAwe2w\neBX1Bfkp1IxPh3gpz4JeUaZUtOYqsl1VchyonmXLoqJXYCyprlNwB/L7WhuP\n+riGecchsSM1jBo5U1uJ9UEiw6Fl98xcTRTe3ZTjXkoPxv+2ReROMYODIt8Q\nsEr42ad01wYuJliaVEoc1xjF3t7AjI0A+bm92JDcfch36fSPjjZIoBUfNDIp\nP7z3wrOULPAsplujXp8xBxrlCQJCk1gaiG53JAmoHs+RQSikcE+sS6nKlBug\nhmRY8ZiYhBT4h65kjFbxilGH/FsG6WnWIr8q01sMXRBfnbvuuoQFiSrylCgh\nPpmruUK32M9EQUrF3DuqAtZR0JTS9d3+BR/x0rm73U5oPcfTQnh4+aYTK6LL\nPRABsM/Hy3IXAMfpuHkCjaV+Jc8iqxdDQf+PKLa1QR4SumO0uwEimacgVkPI\nqVYt\r\n=VKih\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDpnakjfMMMXyUlYUImycqbfl/kCQ8NiN4KqEEVXbCzAiAaS0NJVhP35fh5KXe5YiUTlgp5niwViaJsSXPO1wIhKQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.178c25b4.0_1604008283009_0.17240504564553238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-select","version":"0.20.0-canary.124beb49.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6d9648ab2.0","@material/floating-label":"=8.0.0-canary.6d9648ab2.0","@material/line-ripple":"=8.0.0-canary.6d9648ab2.0","@material/list":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-floating-label":"0.20.0-canary.124beb49.0","@material/mwc-icon":"0.20.0-canary.124beb49.0","@material/mwc-line-ripple":"0.20.0-canary.124beb49.0","@material/mwc-list":"0.20.0-canary.124beb49.0","@material/mwc-menu":"0.20.0-canary.124beb49.0","@material/mwc-notched-outline":"0.20.0-canary.124beb49.0","@material/select":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-b7nR6qfTncs3V5Q+0kIaH3G5G0Y+E2lBZ22hCpsSVblMwDELb9H6OFzKhiNd+vqCJ6NWleVMGVZQHA4bWo/GAA==","shasum":"d78d091a0ecfbad8d0a2e02e3d75a1bacd139e82","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.124beb49.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKq5CRA9TVsSAnZWagAA8j0P/R4Y430FbDBqxNh26PAz\nAgMdQ2c3GZWaAJ0xjN0kB8+PO/zGWu457T9YdaNmj+V4k2TZALXNp6F+uT3x\ntZCvfRMeGhu2syhshjbGuy4ZooFifYPEVDzwxTjbz5xfkBLgVIm27JpydbGZ\nPzi1LHwTa1Xm+1nMJCkNjPEnI2ZSa1HljDl0BoyuJJNfDvAquIsPGm5pcvDD\nL1d4ETVOjank91nn7gfYzucdqXRT2xVY0rHScTtp9gEDGyzNEHEHugElDsl6\naIO0tIucAZ2Z4dex/yQhJRfMdpRObuX5Z1f8tXY5SOA5+EqHCALwLGiir/ue\nBT+D1lqTqOxG4uKh1LNFuQqztFgByzoExjXBbGr4aAkxDcEYu2vSTD39Enmb\n8VehfLUaUg/mfEAisPd+eBKKx83nfX/uGDkhEpXxshcvC6K1B3IpTYED7sNg\n2sloLQZxOtkeF+4roLY+0obcBg1CIVDmU7749Xm7gIDszxF/y1VLIZVpvjAn\nMyO3jw29ucLRO0riXt90WN3LFvzs02NLLzR2u80WsMyK6QUqUjQn+ARXer9g\nqSLPM2GrC7nodOea5++c4P99iDokR8GRh90M0wlRepMe8anXaKLa0iiuv0p5\nBNuZDpwM2pIyArXt/CqseeaUszZyzMLDvPZvpsO3ny6f647o4NxqXvp/IWeq\nidn7\r\n=IbE/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICztphfgCjR7Zey4LWKMIuceZ8ATmb+YVLsQTMEDnhTGAiEAx6W7ark1C74p0vdeJ5eHhGFBgYYZQBId+FH8s8LDIlk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.124beb49.0_1604102840845_0.6613586185715976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-select","version":"0.20.0-canary.5937f468.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.d6b5cd418.0","@material/floating-label":"=9.0.0-canary.d6b5cd418.0","@material/line-ripple":"=9.0.0-canary.d6b5cd418.0","@material/list":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-floating-label":"0.20.0-canary.5937f468.0","@material/mwc-icon":"0.20.0-canary.5937f468.0","@material/mwc-line-ripple":"0.20.0-canary.5937f468.0","@material/mwc-list":"0.20.0-canary.5937f468.0","@material/mwc-menu":"0.20.0-canary.5937f468.0","@material/mwc-notched-outline":"0.20.0-canary.5937f468.0","@material/select":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-b2yp5XPEEU5+5b5XXtGwzkAzlC0X6Tj99OQwaoXt45GEqf6DdB1GjijloAXOv5ZIqvMsSWnGhrhaKGflXP2Ueg==","shasum":"23ec73deeb3121e53ba85e85f82b9809834d8a99","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.5937f468.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxfiCRA9TVsSAnZWagAAe3wP/0Yyc3aN60Q+CajHcP2h\nMCRWPvzIL+eTXlkT/PRFS4Ga8UqlJ9kWi7OkC6rY62xJFRu5LteDYiWvt34P\nua97h/oqALkwBjJDKRI/GK0cu4KNgBnNXGBY3ZZFofaqUjFJIetKA7HoP8ps\nun9q7y3tpXxD7lrbqhHHoXdReXOHFVL3Er/aM0RDTxw7Mdixh+CTN1YM5BZu\n4pr2+qDcyX7X7l/u0FNDJf2hUBZa+2uVrmEkRvtUf9QEwtsTnjM1T/EH3elL\nRCRSMIKqiLBXn5E4BKWRGwD1W0bnLp0La1hKAqNxBn1qDEhgVLLudl6kwm+7\nV2I+mSE7t+08JBI4iBjTfEgIwWuBHpd/+rmD2mD2XySE/ltkIS4Mr7N1/qNm\nzatVCMC/ePV25G7mQEi6j4AWKVMp7Gv/emnaPbPpMlh2ULRYZLB+CcEMAQYR\nJX08rMVgwM4yS0vQ8MTD328rvIUlgSvNilBWn7oIwBSIDou8/7s0lGTw06Nj\nacy6y47pXs7PBtB2dKmIdaPYpSST24ZqwRWh2TNVsXyyVhdBoBqCbndUaLxK\nmaqqxbsk590zFMbajv6+OQWmxjOx9o9OK7PftsB+grneEbX0l33MTRMg7Nml\nce7urge7OxcNOM/fKax8fQQ3KzEIg8g5vXm1XkjxQadGf27Qr+m14mlfPkAd\nwqcc\r\n=fS1s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBDPn1RXcOVQ6Dz3Pet/n7agiI+xjsQIJRedq13afwxAiEA5LY0PBMXQ77QlJoFd+wwmwehLJyJ7/0PmRrN8ozv0SM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.5937f468.0_1604524002085_0.31839741555239787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-select","version":"0.20.0-canary.a9bafaee.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.d6b5cd418.0","@material/floating-label":"=9.0.0-canary.d6b5cd418.0","@material/line-ripple":"=9.0.0-canary.d6b5cd418.0","@material/list":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-floating-label":"0.20.0-canary.a9bafaee.0","@material/mwc-icon":"0.20.0-canary.a9bafaee.0","@material/mwc-line-ripple":"0.20.0-canary.a9bafaee.0","@material/mwc-list":"0.20.0-canary.a9bafaee.0","@material/mwc-menu":"0.20.0-canary.a9bafaee.0","@material/mwc-notched-outline":"0.20.0-canary.a9bafaee.0","@material/select":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3XpIvjCJq+krUBxYRcGz1RAy0/NAmV6nOxSsAk9gTCf6tOxJQa3MjBSK48au7EDAjDlWGWkWqn5XVrUeqTzSqA==","shasum":"0d815ea35ba9c863e5a23586eaa9f40e924bae52","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.a9bafaee.0.tgz","fileCount":13,"unpackedSize":199811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH1FCRA9TVsSAnZWagAA3V8P/i6I5rlUG/6i80wGQYC2\noIiKlhbvoky+DYbExB2nUQmuE2qL1vtOxN29261XTkNVeQoOHYfaauM14pkk\nteP6SPtTPMXTyy5soKGu76ui1zZbR58V72cDcwPV8vOR/Ia66KP5frb7JqL5\nkFBh55dU4xIeyWLapDB2uCsL5pbj5eGyYGhX8sdzCXzBbCfIVhdcKXNF6Me4\nzyyLA1BuD0c8/k8MiW64OgsyN47pfZeAygues3bbfGr1/iobRpFy9c+EyKJs\n2yl0tnwdvO3sxq+ecxpFmod0oArPF+5liNZt0NFpWygH/6hfeTEjYHCSECz8\nYJJM+q2NnUzqEfwIEMeXW/jy9PSbIACpWwX33OVgu2PZw9Z1g40zS4DoUK8V\nRTuP1iHIoyG/Weuyzm341CYZNS3uWSGcT0YtHUo3tPbyCLISp8FDKgbm9dKR\n5WgRZ2nn/zTcoyT31RC+5Te7Fp+sFGvO9Sdb1risR69KRGBDG5EsOr5eESw3\nmM5ZCBWhIq7BnJqgqGF9nYv9zNQo0ntCxT099GtDIbs2befRv9WuKP9hnpRN\nHPxBpxT37HyKx/sWGpaYjAV4pypAisQCwGXT4/51owgyr2kNslCK6eOs4QyA\nZeT5opfHD81Iscl3S9CrRfwlJjrBi5FVoUM/LHAIEbKnSJhp2F3tYumUYkEv\nikV7\r\n=k/Nj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2vw47aBKk0z448AFZXrjhB4Y/aFqI6nTL5AMjAfy1MAIgUHJBJDFD811SfhMS2Q4Gup9UfbHZ67Z8TXTdXTj/otg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.a9bafaee.0_1604615492972_0.060027521712018306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-select","version":"0.20.0-canary.184861ee.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/floating-label":"=9.0.0-canary.b39094d14.0","@material/line-ripple":"=9.0.0-canary.b39094d14.0","@material/list":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-floating-label":"0.20.0-canary.184861ee.0","@material/mwc-icon":"0.20.0-canary.184861ee.0","@material/mwc-line-ripple":"0.20.0-canary.184861ee.0","@material/mwc-list":"0.20.0-canary.184861ee.0","@material/mwc-menu":"0.20.0-canary.184861ee.0","@material/mwc-notched-outline":"0.20.0-canary.184861ee.0","@material/select":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LU2LCqqvDuAqgR336B7XkXsdICLGryBkneLqD6q9dTwfNoGLqHgmCd+28kLCKnQk9JAGXhgOW3VlAzt84lexWw==","shasum":"e06d6395efd5ccaea31cdf82df9d17d8e313a98f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.184861ee.0.tgz","fileCount":13,"unpackedSize":201151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpeyCCRA9TVsSAnZWagAAK1sP/Avrhyy1VMx9fc3J5Qsw\nNesfUbMUJjbpVSGINVlVt3k/MCxpqk06YXo10Jce4ZbhALwPtu9sn261mpVG\nUwChPmMUpGVXVCfLm0LNV0t5W/s3J7DD+bv4qKuP+zHbM+IDR/C+hMehoDtV\nTELlGu0sjkFQp++qADttVoEDIErdDUZdwAMyk1TWkIeiOONVBLKfd+yF0VSi\nPq4CRjoxGXZJT9+lyUdAsTew86ZSVq8klRMfYtkgLUpEZuZRN0YzjZLZwQes\nDmBHhLKSmKQeh9EngV0/PCTLX3oVUGlSFcuPb3RWIFj2Pq9pxHVJdPeJxn2r\nui+e1qBrT9eDyW/1XhJWpw6lUvOmGo5zyyQnnFXPtTF6kfs8D9mKI3wvZOgF\nh+bJIDXVKjbqqg6LXTMFtEOCKRTA4NQmIQMKHW/r1CSOxx89/jkLk0X7GB8o\n+3uIMiMwfavBYFrCP6qJ+U/1G06d0OusKXdff0quYfYi1ZHhokNC/qTsztOD\nC1SbEptM5zWdXYQfEDRzh9Nx8ZSRF6ZsNlY1lkwT7hbITlSwq8vmo0uSFbPx\nieTa9OANLd3HOSyCXxAARAHRPQeVHxa8PNAHcNa5MFKOGqbVK4sJ3ACOJjpT\nZtZ9TB6uSLJ+ZlXbq7yYCjnbXK5Ctsyhh1i/CVx7PPFhgpNs5bZFe4e1/DZt\ntEEh\r\n=VPZb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2aDhdmjXduJ4izKiLrYBN3zbX+imRBWfUCZcGtPUSLAiABf4S4uZNoVCABXSld4UgSzUJjLC9yTbu2o0Cui4G8YA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.184861ee.0_1604709505799_0.29751920601502935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-select","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/floating-label":"=9.0.0-canary.b39094d14.0","@material/line-ripple":"=9.0.0-canary.b39094d14.0","@material/list":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-floating-label":"0.20.0-canary.6c6ae2d6.0","@material/mwc-icon":"0.20.0-canary.6c6ae2d6.0","@material/mwc-line-ripple":"0.20.0-canary.6c6ae2d6.0","@material/mwc-list":"0.20.0-canary.6c6ae2d6.0","@material/mwc-menu":"0.20.0-canary.6c6ae2d6.0","@material/mwc-notched-outline":"0.20.0-canary.6c6ae2d6.0","@material/select":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZUTnFqNySA+xFP89/pJ7/ckq1GcX1Yg/FFsi9reavqY2IFQBXuAbUcgZk6C4F8wdYvjtyuaQ7kuOS2rEGLJJGw==","shasum":"3e46cdc12e159c99b64456839d0ed8f3afff8909","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":13,"unpackedSize":201151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT7gCRA9TVsSAnZWagAAt7oP/2qqAdy1nL5bmHlJ70i9\n4N+H8ooy0GPOTLJpCXSbPc1R7E1DMu9Jd+CVvnW3iBEJeewAGmnssYoXa7aU\nWO9UNjSsC4fYx6PcsyNVX0inP07sgD58hqB3RvTGxnQ52hTdbo09zH8W6PXU\nHeWXCVlkBdYWQ7kosowwj9OPv5E/zt25djncDojce6reW4TVyQCGcSn944Dr\n+7VbosAvjqaVY2IAveInR9tqi1VRsdxoiLivtTRC1YNznif6jZNRNOPxJopQ\n/DjxF2wu2+IxvkPtKiUdpCt4vbRvYNrAxw6A5WXyhDUqXIdGmFV4a1XNI9jB\n8bdy35dEH/rXbOYSA0OdL3Vzaj9KO/fxFyXeOYdV4SguFb4KcEh3WPYvxQSI\n2DKUs65FipdqkTk10G9WvLN+yxTmcdtTAKEQAr6Y2NA0QwmRX85qdwHjiBRp\nQeL3qVjl7kwPD3N/9CheD1klKLtxUqHJsqfPddcxRlNId7/SgTuTHyRvErto\nzKBmCszqMdSjD2IhDj/7/88wbpbQ+xAUT0tOKqDu06IxaPOrL32vOKfFKj3V\nH1DAxSfL8zYNZ7wAUUmOW9zmLLfGl2ikJB7Pa8fhxn23ivgDTY0EUIM6wlq8\nmJ/NlnbATK3IeS+pxKuR/e96Rvehmk/escKc4oqNxvcj/pFQsSrtNVJ+BOUn\nK1mj\r\n=h10Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpub9yBO4DPGKsyrr1/1z/TQB5bCQhaywmoe+Ka6LfSwIhAPQ1kuaKRJd0Cj4UGNpb80v7N+OpwMQWO9xgnqoJKnM2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.6c6ae2d6.0_1604927200340_0.22476885648652756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-select","version":"0.20.0-canary.ea2aa477.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/floating-label":"=9.0.0-canary.b39094d14.0","@material/line-ripple":"=9.0.0-canary.b39094d14.0","@material/list":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-floating-label":"0.20.0-canary.ea2aa477.0","@material/mwc-icon":"0.20.0-canary.ea2aa477.0","@material/mwc-line-ripple":"0.20.0-canary.ea2aa477.0","@material/mwc-list":"0.20.0-canary.ea2aa477.0","@material/mwc-menu":"0.20.0-canary.ea2aa477.0","@material/mwc-notched-outline":"0.20.0-canary.ea2aa477.0","@material/select":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yV7wBxyw0kRG1ZITJPxIzFhbGZXi+hc7KTWFSbE9T4eA1B7CCJP57UwJOKeN1iNCcOIog0N8Shmq3nqtvVE5Gg==","shasum":"ea574bef0f1b0d99892c21c60b523f7af3f532cb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.ea2aa477.0.tgz","fileCount":13,"unpackedSize":201151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqde9CRA9TVsSAnZWagAAAlkP/3wZCaUXRsQBezYRx8RS\noAxvUw6odAFahdko9OQ893r99aRF4MxNDDNST96RDg2fpihqKBT+8YEVceBD\nvBJvBJiRRMOwNS9vIUldwpGyUUY7ScRqyV6vGWuCHnjVImC6Yo3ip9irW/xL\nnzCLoH+e3Z20xkwBPakIGbPPjimXxMKm8ApFpAzA+enznvUDyMZ4iLhgQAg1\n6jIeIhQW1RuSZvsCebr1Tz68AjLJK3z2g5v9WVm4HKnfdJBQbdYGimsybChi\n228wRhgIi2V1l1JTWwrxiaLWCZ+cTo3pBnifhX1jgi4uJ8mFqJjdLwao7V9U\nqS7EmkD7WgjHHnRemrD1AdNkZvBZtU8Bw3Hei0QYSk3q7wV1edP22Ftdsv32\n1JehoPQLnW01k1DcwtvWNpB74cC9pJB4+EVPL8bIx0QQ7MvE5CziwiyIfgzM\nFRZz8arHosA57NkGoBMumlfF6T9RYoslJXSfuXUWkInXkkoxuh2IU7oV8MZE\nupbnQJCb+I1wc70Sty3o6lQXMfwcSjjmPKiCEbfLzMPNL5Q3Jwz9aZ3sCDou\ndimcE/0Q5pzKAShNzfwBn8DmNa0hlryRVTQ2nqpHM8sG272AoUqDi1XFobpX\nJ4iQRLbysi3ewKPz4eVCzH4QkuC/SPcIUsQbea5U1bVP426FiQ5+QLTUl8JJ\nRn6F\r\n=2rRM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEFGmPwxcPnM2EP/njm7OLFtdz/OlitEPl3CL/hhNZOQIga3NzfgHdraU0PbI9iYKJsT4o1r1CwaL6ikQtPkVw82k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.ea2aa477.0_1604966332966_0.8114495262821568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-select","version":"0.20.0-canary.a2c088dc.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/floating-label":"=9.0.0-canary.b39094d14.0","@material/line-ripple":"=9.0.0-canary.b39094d14.0","@material/list":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-floating-label":"0.20.0-canary.a2c088dc.0","@material/mwc-icon":"0.20.0-canary.a2c088dc.0","@material/mwc-line-ripple":"0.20.0-canary.a2c088dc.0","@material/mwc-list":"0.20.0-canary.a2c088dc.0","@material/mwc-menu":"0.20.0-canary.a2c088dc.0","@material/mwc-notched-outline":"0.20.0-canary.a2c088dc.0","@material/select":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TsX0dbQK1qUw/UymADCPctvn5wemMFj21k0bdwkVomsVmETGbLyEOJ6F5ANBDbBgoHtsI+BPKnGykVw6c7k9tg==","shasum":"41ca1e240731b4f8078cc6e784d90a9026e462ec","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.a2c088dc.0.tgz","fileCount":13,"unpackedSize":201151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqLFCRA9TVsSAnZWagAArcMP/ioJ1rcmkS5fVeBVpgIf\nWqSA15zLS0NPuHX44wfUUbj+S1UZGNJb6zogp/zsgez/BgVXMvmHV3U4cTUL\numIOc7kt3kCoynAv3niTSYivTY8yjDrU89PA6ZwfJ2rOMVa9fuewbeAcywq2\ngbwXIk97+mFkhsC9XqNiIfoyYEJue+tuQGBx64Ep01jNFjsw+ASWBI4Yajqr\nK5/7sN/FGFHKisqYS3aEwUTFDVi4ArgUz4Hl6QXMku9l8q5FFYO1z80CGERQ\newrlcB6KwWBlXDH9sjZVLzy1pLNN4usB8Yh6F4b1ZsyBG4xKdZ/9BZgFNWdg\n8UOta5hCB5W+dTxBKB8Mc0XOPgOwTZek7u+Y3YSCfyrgIs3O0cDqSh6HbeXK\nBzLUKJWutoOPc/7KZmD3TQJLR5eZblJvEjL2WoM8oXUnKa8fDU9Ng15c/Q5m\nPIMU0jXxdVeby9zSNtN/1oR4M0m9utZc6yUBH3fhZpI+RWeH82KuJkvu1TdD\nBQ5+p3b4MiP4mFwNMrCXY3YDOsCuQKrMgvicfroSFqO72t8anVjRI+arj/x5\nXpFXOL6O4xIglTeiREngaL5AU/ixvZFK4WQ9o+f7E5YBO+nDqgecnnGP2Lvv\nMfLkJE6FEKdNUdcaY5R1BjgJB3EGnbQFb08489+PUWBjLkRG0FLoUE53e/NV\np5E8\r\n=wAKH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEsxfIB6Rq5tlI0IQearupYse2LsJjtKN5m7zRmmiNoJAiBkcUBKG0TvOa5wrtVJ29ptaedOIBoteThVJJUcKa4RIQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.a2c088dc.0_1605018308529_0.21056523002950867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-select","version":"0.20.0-canary.b04d71d4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/floating-label":"=9.0.0-canary.b39094d14.0","@material/line-ripple":"=9.0.0-canary.b39094d14.0","@material/list":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-floating-label":"0.20.0-canary.b04d71d4.0","@material/mwc-icon":"0.20.0-canary.b04d71d4.0","@material/mwc-line-ripple":"0.20.0-canary.b04d71d4.0","@material/mwc-list":"0.20.0-canary.b04d71d4.0","@material/mwc-menu":"0.20.0-canary.b04d71d4.0","@material/mwc-notched-outline":"0.20.0-canary.b04d71d4.0","@material/select":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-g+KoWRPjVmqrYq2PBUEw6ci//estbFvhFFl1tx8+/5w25Lo4JUO/Zp54yHuU5f9QXJ4D5yEltUl5pqAnq2qOug==","shasum":"1b62e44cb387ae75a6bdcd8f66a46fc64b8f003f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.b04d71d4.0.tgz","fileCount":13,"unpackedSize":201151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGnCRA9TVsSAnZWagAAvZ0P/jtCwADV8vzLElfc9rAm\nLF2FOczxmiPHGoToBJqbBTO1OP6N5v7gPZcSF0KIBmhUEMoHbyp4GEOmoI5a\ne73i/MiZMRzosEPQB7aqdss7ZNlqsWy/wZdi1tEPNfTYBPVjoPE4Z87YFYCn\ni58c5noLHcCgbad3Bz/P1YB7NiqQwo+Xfa1nH+nVGqdItTdfrVAYY6Ya+bTC\n1taSjApGuEuP2uknGtq1Y42APOcUkBX+MS0jt72ZGn9BTwMtib3wGl7tL0wL\n5AXHEl5ZUOcgKHzGReVu1jFShK2K5OqTXu4NphSHDiRkqZyL0pduTyiGX8vq\nkZQuH1cNGEsfwXRLA9ZIgheKUOm+0CXejKlTvqzciB59ManWZWrlAYu60+0h\nOptEbgd1jazkBlfMDBwSmoa8pl4WcRY25zdQeSPbVjI4GUtr/caASjiF41/K\nm3vTvc90q5StDwjvxM53TV64n3HQ5ISqow0O8eKrW+n3ysQGVQ0x8KksbY5R\nI+5kBOiZM48vTF2n92ovoxxBEqYq60YOWpsIVe6i6TahArMhXawCp5dpL9Mu\nTLCg3+Q2vukTHY7TeDqDvHlJfJW+u36G4tQG3Lf82RZpAGw1TQB0dYsSf3tL\nlQosU772roNc02pBGN31Zrc9/NHv0vfFwOhYnU+1oOUemzqaOEs02mDKRXCm\n/Va/\r\n=3Nz/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhLcuf4/k7P7iN65fFMQJL7g2ANLTHMesSeBL9N89RvAiEAtW0433Ln70zlTHfHfz93+Zb26ULVQak4FibTadnHZ+w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.b04d71d4.0_1605177766974_0.3434022372432748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-select","version":"0.20.0-canary.2c553352.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/floating-label":"=9.0.0-canary.b39094d14.0","@material/line-ripple":"=9.0.0-canary.b39094d14.0","@material/list":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-floating-label":"0.20.0-canary.2c553352.0","@material/mwc-icon":"0.20.0-canary.2c553352.0","@material/mwc-line-ripple":"0.20.0-canary.2c553352.0","@material/mwc-list":"0.20.0-canary.2c553352.0","@material/mwc-menu":"0.20.0-canary.2c553352.0","@material/mwc-notched-outline":"0.20.0-canary.2c553352.0","@material/select":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UTTy/oW5OMmRzG1ze4TX18GWOqROziGn5jDVdkA6nZBNR5HS+QK11citAk0fLiE/FLkxhj8BS2dw7i03uP33PQ==","shasum":"9a644f57279149407aa1693154d1fe933574cb18","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.2c553352.0.tgz","fileCount":13,"unpackedSize":201150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbqWCRA9TVsSAnZWagAAVVIP/0Z8SR5k5tshm1gNViQJ\n3nUTD6KDGjEJ/2Nz8evhczQ4liJ76J5y7yzjKKMqr7pV4xF6Mn9KaQNd/GuQ\nncQTEKsi6l7lxhOTyWiDU8LaNpa1v9IuTiQxkrvB/ScRivgBjkinb0YBNaRw\nqS14qNy0TFZZsRUweCO6FV22dxJsoT5lqcRN4+Tk5U5pRTRruSTLdMPVaRbN\nMV0rbBCdS/O7WbLUw3ckdQg7nskM1VNbhlts0dWZL/M2VHwdCSLgXA6Hw8hT\nSCbNEeodWGujINWrhglS/uhlqTt6wnT8WFzZ8wbdz6j9PNfe4Eve1zqREeJ4\n4xqueJMz8BUieTETq41h7Oa65OKnPikSMTvPrA+knzZdDExs6S7eSQPx+XJ0\nAobPko1/xLwoq/AmGMqn/68i2DfLcG5lZj0gdyYmJ3c9as8w+ZfGrvV806De\nEoGcG71e7Pz+xeNaAAKg0qJhWb99ImBm4LPuQecxzBYpkC9aUgMiu05Fg50b\noaEuDmYiz5BGtfFSHxj8+8I1Rc4dpezpLSxyhHeW2J4yhXt96QP83zqa3C/w\nsA4FtdecIOjVCLIZbGYOLL71BsKwSLaOynjNUj/hkDWIgZd50Rx3nGOqEf1R\n5WtvN8xMvZdgE3sO5TkNDbVZuZMkPk/fGN5WNs3aij1Ihdqf2bqGcenwqZaa\ncVrN\r\n=vzJC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJS0pTB8rNHzlS9iQ6v4IqZYRMtjn1NSuHJLcCQymNWAiAck26HtDya0pVszQBTuSaTIaMqGRsdxT/b3b1w2zO1Lg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.2c553352.0_1605221013526_0.9649633724241737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-select","version":"0.20.0-canary.6560d19a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.240c5f74f.0","@material/floating-label":"=9.0.0-canary.240c5f74f.0","@material/line-ripple":"=9.0.0-canary.240c5f74f.0","@material/list":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-floating-label":"0.20.0-canary.6560d19a.0","@material/mwc-icon":"0.20.0-canary.6560d19a.0","@material/mwc-line-ripple":"0.20.0-canary.6560d19a.0","@material/mwc-list":"0.20.0-canary.6560d19a.0","@material/mwc-menu":"0.20.0-canary.6560d19a.0","@material/mwc-notched-outline":"0.20.0-canary.6560d19a.0","@material/select":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8Gr2evo2DgNNWpPyir3g7V1ZGQQy05RPfmr2dOOibBJMawSFph2jDGXB6v3+UzuG7pWlopl8m6Hg/shbAjIn2Q==","shasum":"23741eaad4b00d9cf091decb0a8e08a277fd7d3d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.6560d19a.0.tgz","fileCount":13,"unpackedSize":201150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvFJCRA9TVsSAnZWagAAPo8P/jVOKlvPb3sIFC1CtSw8\nrKl4fYbYQkHlLNbG4UHwbaIBXnn797uQT+rLbPKHkFzf/nF7I2z9VP50Y5Zd\nATjfCGv/RBS8QlltJPvcC3sd5NJxtDhFn2YKZHNvCygE5teNLZAFZs7IlXT4\nfTgAQXfmnTp6pcemuRyCGoVzUERQd32hvJy/nh1tT2KBRnSjhLXSM0nkStSK\nNja41otveYPrvUntJ+nzCmnCUnLSheWjAeoWP1jSnD9cDC3ffAPr6GM9Mi6d\nQKnNW2slYHIewDpSMILHlYdKK3bqhfUC8fS/7ph5KMl8aHzpax7vkZp04GmJ\nI9Lj/+xYVQGSzuP7LaqvRxz+3T13BEQtfHkKXvPfIN9H9uEJtNy34Fm6U8vg\nv/so6o6IjspgNENstZdZJbiC1tXBfUugbUtiR7RQhMR3ctPfK8A9Hna9AXYb\n19VmwkxoHhau2XKj7Nm4h2RBk5hF768fYTrFx8+rQC9qGmSpIQX+OFu/KKFt\nduXC8Fa8J4SHwv0JzFeh3xWeASIxS93pacLDh28sVIN1CS5Jrby9Gv2NC0NK\nVQP1Esk2Pr7vStaxNyGdYiZAi5/IgDuz8YTQioPrYv74dVx8oFtqJGPv7tJw\n0dFPkT4t4JWxGtfUJzyv4vucoJa8svPCSDay1UEYca5b4wHycsguPeHECx0F\noM0P\r\n=IEVl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTlHA8irhfwTtzkjrc1HcNgot7xpqkiHnNC9WEv1AJXAIhAMW6PV6jagP+LFi/VW7jxSTDlrKhGthsXmopFdEgzKww"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.6560d19a.0_1605300553550_0.745156681993862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-select","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.240c5f74f.0","@material/floating-label":"=9.0.0-canary.240c5f74f.0","@material/line-ripple":"=9.0.0-canary.240c5f74f.0","@material/list":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-floating-label":"0.20.0-canary.a28d5ec3.0","@material/mwc-icon":"0.20.0-canary.a28d5ec3.0","@material/mwc-line-ripple":"0.20.0-canary.a28d5ec3.0","@material/mwc-list":"0.20.0-canary.a28d5ec3.0","@material/mwc-menu":"0.20.0-canary.a28d5ec3.0","@material/mwc-notched-outline":"0.20.0-canary.a28d5ec3.0","@material/select":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7kHMff+1ns4GAw4QNOOCF8WxXTp+YLgQgQK+si6p086AJ21UAirlmsF9bjFDuOqG4waJA1elAL0pA573gsdxyQ==","shasum":"0ed04e41988abbf7716e026c4051170212529459","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.a28d5ec3.0.tgz","fileCount":13,"unpackedSize":201150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+tDCRA9TVsSAnZWagAASv0P/30aDeVzyG4ivCb9K8B+\ncs3omKmsIWIvZ6hwD81Grx/E/k74qq/S0qk0yo93vtMtUzeaiEIDwfYOd/+P\nGT47taXGgdD70ReAM2hwdo5PyAJi3e5l2rgzkIus8FTMKiA/ThsYJaZSSnl8\nQGSErPrEop9cfCRZgde0SgbK2/hu34+l2dCNjQ9x2YWHJyhoI6H8vFzZHBs3\nrTMCmp6LqTRn13z7/jwpurwYOwSDnaZjZcxsmi78nOyw0iJkOOdii3zpWXoF\noMU1mb1vZY/G5hfA7wGoI46IZakEU4dkTzZ/fdfZpKiuclHrIahg4N3yl14u\nTOhb8luZipGrWLfYvx7Wg8uvFbdbNT5kyH8jZPw7hCO7o/N+pNhZkrGmj7Qr\nliFG5Ju5+vpcawVwWN3cx5Nv1fRgFEFEVZUnJUunpCNbYWX24p/+XE3w/HAD\nQqwsVK/Xnw3eur6+tLqK9NQuUL1nLeyGk1kkJ2k4nv6+PTyWHMJ1mGi8szm0\nD46zz5sUXMuDjxoheHMgXewqOlgr/L6SKG5SCuspsW5wYKeF7EbMweu6Fr9J\np4skRszsekZShlbepQKQfCwC92yyORXGjsP6ydaGY3hnCfHKUGkXjOKePNZe\nOnLBTxTVt6gFeATbU9mEw1ebqghGyAGrhra7h7lhmx28qUodXFnJ5nDenGeE\n2MYK\r\n=tDMG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSt7jJgwTjDnpv5P8N7Uaa4cdw3Jf+KgM5kIaSuJZrDQIgUP7pDCRenz+m/Xgi4Snhx9JsoTOMLx22vhfqZFJjsds="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.a28d5ec3.0_1605626691363_0.12059670401951261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-select","version":"0.20.0-canary.03e7e778.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.240c5f74f.0","@material/floating-label":"=9.0.0-canary.240c5f74f.0","@material/line-ripple":"=9.0.0-canary.240c5f74f.0","@material/list":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-floating-label":"0.20.0-canary.03e7e778.0","@material/mwc-icon":"0.20.0-canary.03e7e778.0","@material/mwc-line-ripple":"0.20.0-canary.03e7e778.0","@material/mwc-list":"0.20.0-canary.03e7e778.0","@material/mwc-menu":"0.20.0-canary.03e7e778.0","@material/mwc-notched-outline":"0.20.0-canary.03e7e778.0","@material/select":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-f5fcQla2M8aMqXJYVAXQdizM3o3TbB1QZB7GoV2rnlmX48XFcojCHOYSuYq+I4r5zS0tOHxWc2QCcVA43DM+fQ==","shasum":"3562a1509d4a4f690fa9c93a6872726338eda27f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.03e7e778.0.tgz","fileCount":13,"unpackedSize":201150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCQPCRA9TVsSAnZWagAAVVcP/2zq2i2YKqKKdvJVdhO+\nsTnNmUSlCYuz/wKhium5b3+7uhmGwoBwWbuzHVDhQHRyoi0lsgVJ7zP2uxgD\n7JwEvSjSy3KhffZ4kRV+mfwmL98CVU6n2dwo/e/PAt5l/lEepjmXiKA994bJ\nXwwdwnO4eWaePnb9KEBeMS04vBPV0RNFkPenD/WbnoylteRFQYuZ0rqcBBg7\n1PKqveew6/B/jnojxdZXVmFDM4wRaj2YsRNqCIRo6cpd6UJ8S1GvFNnoOY1E\nAvxnPUrZj7PPS9SAkRKH55j8mW8HEXfufBTIee3uMeYii/+SIqsamK7j/Eh5\n1RrEKuaXE0YIP+uMtpq7KVZGGhuAos+cGncSQrYAHILjode+2bAjCUCAn6cj\nb72vexgoYwghhrLWK5eTJ4YfrGUoJEXbHvIX5phYNhZOhAONPsvO3MHsukwh\naRXPav32eM9MakmCMdXpYIcuOiwO5qeuEaJEapUZdXUUGjbSza+3EmfQqwzB\nI7kEMPN5AUibVKRXwLvmqMj3gKUvJ5B/MfT+KBGJXWe93t4NKSXcK0iClP9B\niksvW8yCW3qK9tKVCLy4Q+K3pGk3iL1AQr0FCh7pCBS5DSF7VEHhKMvHO6j3\nyHu0eCLOtTdlV+PcMyyj5CbnL2pMxYV4O5B9mjYprE6LrnfbUAiHQ/DSQmu1\n8xdS\r\n=xyW6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvzt8ca0cK/zCamamGrxe4DqBV2W3l1qWEUnZMaKG37AiEA2ys+5Foh7oKAVlys0L2iX4on+jD1fLdRN0pEn1uQ4Dk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.03e7e778.0_1605641231565_0.09597030235489079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-select","version":"0.20.0-canary.ac8ed597.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/floating-label":"=9.0.0-canary.482ff9091.0","@material/line-ripple":"=9.0.0-canary.482ff9091.0","@material/list":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-floating-label":"0.20.0-canary.ac8ed597.0","@material/mwc-icon":"0.20.0-canary.ac8ed597.0","@material/mwc-line-ripple":"0.20.0-canary.ac8ed597.0","@material/mwc-list":"0.20.0-canary.ac8ed597.0","@material/mwc-menu":"0.20.0-canary.ac8ed597.0","@material/mwc-notched-outline":"0.20.0-canary.ac8ed597.0","@material/select":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gpWmRT7QB1oimDo1+mnAVFDyBSZO2JrOPWYWkC/zCG4Dmb5bBZq06DlIJlmWOskM0zuPYfMHFq/ugaeBsEA7Bg==","shasum":"8d30a824ccaec4194a8d9f52b1ff293221a045c6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.ac8ed597.0.tgz","fileCount":13,"unpackedSize":201150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftErgCRA9TVsSAnZWagAAXekP/RLWUctOvOWXPiwAoRdb\npckc69r4mcsozqwvt3HbXoFnoQW1eipOhJFhtvTmruISMWuftI0XxAl12qLw\nuTfXbEclzHUlQpE3XdJ9b7xyIVjS4ziRsWlePOvXiqXVkoI/Ma0ddYshz82A\n47WSlDyga+9ghODgYonOevUKCxrp55/+3pWmU2okln2eU+LRD5X5EIlPRnZK\nqUsCIAU+EnG3TenQ3+yMWFVYX1Vmn8wAnYWCSGnEl5V6jPFum0sQ3A+QevQO\nF3fFw1SpKRfq/QNp1nGIwGwsbbs9hNQC8oIC6d4wAtDR389SVNTdYNNf1SfS\nP3INWYf665pbGKwxC2l5oVt1jW+ZAZbV0TxFbrvFouMAh2Rhn3RvTLGCe9hf\n5W7dyFlwLjp5ouAgrR2flkWaKh3s97478i0MESqKYye7Bcg/qmckp2yIUjl1\n1BggoYEKNfSbdrnQ1GAhXzJ0V5tKvgRzIFK2Q65ceEdSpnZfVwVKX+y/DDat\nomsMLCmKL6LrICpSQH9qFMVBofO+SXzmBXVDxtwyy4N76gVZ9+mqUN3Y5Hc9\n96K97ZnDdlx9kg1XJ7J6rY6988lBX2tbWQL1HmVI2No0g90zdr25jOwm6GsZ\nAce3sJTY+3dMYXl01z0iyUfNfFWWQVP7kVcpzH6I1oQKhN7I8NktUOyy790d\nt35D\r\n=u3Lu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB0UmtTrsFIFxpcZhh4roP1cyYZ/vElT+SeKPcsR6mUgIhAMKlpVj7UerdP53k4wlOJ7UTOE0aAKte8/PNdwpU4Fho"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.ac8ed597.0_1605651167603_0.4470558331291885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-select","version":"0.20.0-canary.b6a60f60.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/floating-label":"=9.0.0-canary.482ff9091.0","@material/line-ripple":"=9.0.0-canary.482ff9091.0","@material/list":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-floating-label":"0.20.0-canary.b6a60f60.0","@material/mwc-icon":"0.20.0-canary.b6a60f60.0","@material/mwc-line-ripple":"0.20.0-canary.b6a60f60.0","@material/mwc-list":"0.20.0-canary.b6a60f60.0","@material/mwc-menu":"0.20.0-canary.b6a60f60.0","@material/mwc-notched-outline":"0.20.0-canary.b6a60f60.0","@material/select":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4kF4byFy9T2rGnwfHWUw+I4VBFtgSd9mRnQQEu8tbJ3jNY6yPxI7SnJFdMDbln3N9v1K/5XRhsdOfNG5FXX8mQ==","shasum":"bb0779f18023f9399c3ebaceab8c9e582c91f4d6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.b6a60f60.0.tgz","fileCount":13,"unpackedSize":201150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFRbCRA9TVsSAnZWagAACPsP/AlufuM9Jchg1ie8n7as\noZMxwVzTeQM7RdWnCEYwoQVWjEwDpoS0bS5/OPHs8hgtXrA1PW8XmWUS58TO\ng8BDgoYvGj91QhZG550M2/HxSNkSqKWg83JqHmE4Xr3pg8oTG+7oswsZMVCB\naGJOTfStFht6lHrCvV0nT0Kpy5Jv+9kdUhe+upATV+gABmlHgMcNzvnj6vAm\nXiaCazbvlZ1u7M6bkErsy6LF81LMfU8rSLwhvuSexQQVTmLgw9bygE+kdiSY\nQvIox/XrB+t4ZBH2fmBymyvljgaK47adsQmasTMiibaG66cdvNPqYE+GjSmt\nIngYEYl4PoVNN3Irfasweh/f6ff8361wzJ3zEa5I+S/HM40MgXBt3xfE90vv\n8kbYg4O9ROzttamjRePw6gQVhTWqXFTX5Dj+xXE3a9AZaByNvfEjOW3jU/YI\nXE7NIsS0VrWccZYlIMRcEvAmY/3i5boThi1ol2Ck2dQ5L6vv9Je33sq5r+8z\nrejt1g6rBk9MU6ke1XW+lWBe7MbHfg6cg7HcvLhxt+zlxMdyQE3sz9dYbzuj\ng4faIPsX25uydKzFZcM+svlsmbqQyM/66Us1Pl2gbFZhglUYQtmbZeYOLb+Z\ncUMVLkZgK7UwZWZGwnMsXOfncEdW33ZpTQfJ2VWaTk6tpTLU73w09/CZU5Yy\n+f6k\r\n=yLRt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDnTRuw4EEj8Ou6sr9+bgGvcAMirc6FYrYVOMlcjSnVwIgfj/cgJjnlXyXzut2ydUpACzFa55LwEWmSaoKNUlytGM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.b6a60f60.0_1605653594346_0.9594021956930903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-select","version":"0.20.0-canary.71cc24fb.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/floating-label":"=9.0.0-canary.482ff9091.0","@material/line-ripple":"=9.0.0-canary.482ff9091.0","@material/list":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-floating-label":"0.20.0-canary.71cc24fb.0","@material/mwc-icon":"0.20.0-canary.71cc24fb.0","@material/mwc-line-ripple":"0.20.0-canary.71cc24fb.0","@material/mwc-list":"0.20.0-canary.71cc24fb.0","@material/mwc-menu":"0.20.0-canary.71cc24fb.0","@material/mwc-notched-outline":"0.20.0-canary.71cc24fb.0","@material/select":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-woBAM3ywSt0DbFtemjDzw+m/T2cT6bgSZIVnxXxNeEjWQu27T7DjIOYc5ls4UG3Eu1PaoiKhP6Xd3L0k6bT1vQ==","shasum":"aaf9180bff0b8b8d7715adcbc66d453cea1cd2b9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.71cc24fb.0.tgz","fileCount":13,"unpackedSize":201150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFoNCRA9TVsSAnZWagAAtrMP/imAxNa65k+ljaH+DUTn\nd0mj5PzRVOc3b0ewa/bvqECuMG28+1UNyhQG1xIAfUPlBYJm2Ki/AI8aL0VV\nxWKE3Ln6pkgdYUp2GoRCmSLCzfF3tE0JQpzLhajkBXWgBUaKZhChu9/tNbBg\nThEIPAl1q0DEioXuvymnSQ2m9Gg3B++UNDDvsG9MDcncV/eidsk/Jtf7ysy2\ngh6gVNzxKQbFu/aEyt0BY4+5P12QcN6LgAaPfVaUoZWJQiuHDzASufjjnFJ6\nBXLnGhMK32wGrY/u0Xwfu59i5/pZ2ObxKIqGJnfYmkepsaVCKXjCS+xgSxU9\n97GE6rQCM4vRB8Hg91gpb1AxuSe30s82Eu5tK7mEpKFP7oHPBUXsQjzJMS87\njlJmhYjaPuazXBYUV3yBsLQcbmDgD0N2Q/t0FUjRsl+lYytAvog9HXMZPISE\nIEPn+cfy6HjQlu9r5MeUVwYU3DVUZYgC62bAtqO7/h067nABFSVQvtJURcT+\nJvdYfZyydp03fwaJV0yeJ+yRH6k+FQPlVBUWnLysmUNTHvF2Ykboi+8B8COa\nb8MBZJZIAU+7//7qOCFtgOhyK7QAlv0o/GTDqms1mHDeHEOBTEcVC7ziE1Sl\n6Ng8vJRA5cQe41tv51nNJgBfTqoWeZna7QD9diU3p/Oz9x3Pp0tlYG8kkS0/\nS/zD\r\n=P2AY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmUQMiuqu7gcH5Z2wTZ0LdJzYYd+VaIQ/BVq49+nPVeAiEA3vLXfx87rDx9p6Mrm3gvMFuS2PfFTWC5IlFqSmFARzM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.71cc24fb.0_1605655053082_0.28372085641957656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-select","version":"0.20.0-canary.761027ff.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/floating-label":"=9.0.0-canary.482ff9091.0","@material/line-ripple":"=9.0.0-canary.482ff9091.0","@material/list":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-floating-label":"0.20.0-canary.761027ff.0","@material/mwc-icon":"0.20.0-canary.761027ff.0","@material/mwc-line-ripple":"0.20.0-canary.761027ff.0","@material/mwc-list":"0.20.0-canary.761027ff.0","@material/mwc-menu":"0.20.0-canary.761027ff.0","@material/mwc-notched-outline":"0.20.0-canary.761027ff.0","@material/select":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ckYLD/phvPm8wNM/lzW1vOHqzDJIW2h8Cu7M+dVlZVAmn/f3Fw6jAQCQP0IiS+Zywmk/xeK8mj65oJxI/K9rBA==","shasum":"9aabef0da5a0029740346dc126a23a15394fd36c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.761027ff.0.tgz","fileCount":13,"unpackedSize":201150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZzsCRA9TVsSAnZWagAAsSIP/3Omoyhpz/TsNoja1wni\nhRJSswo8dxUiifZ8zJ2MHhpcdo8ar/mYZKE9s5QfbMfv60mAWfxRdlhj/ik8\nyh4UAofKV0Avx1TZbXHhrYmsn8XwZEUWVsiTwVcwpb5WP1fS8PkrG5G88eLL\n9DTujGIlOBPI95r669Fl2KqQ3sOqIW2BaGtE3h7/O1QUt4jmT7pHFQ99xBhV\np4l5sxNhFWmABa1T0jyq6qq/VPJ0XCR9D51emqJZ42OAd1Yf9xSBWvqQKgwo\nyo5it1wByHkae2SarBjBGaS/ITqdVC0db81dwvKligw5vQ6/OFFbgPG0FOkn\npTizQul+UZTGQBvaxue2Z4apXdyS5NpxkgHxMC28LecRPyu53viiaoK4H36A\nZpcEO9AdKSBFtUfxoNoGU/3HTOMVNsqQdTyQG5HS8O22n+x7cwFCJN9rL/xi\nl+raR+wqHmq1T8BnOPAF2EkRjDnvaoGRg+6TUzJJdAJWtXqbNTLHZdhQjMqi\nInBru1Jagiga3shErhPIoocoHhHoiJIPRfFER0hlrQ1CbMpLWwIaZ/zF/CVT\ncFukWuIwjcHJ0OOtdBihxmLDUhD2ynQwSpTiG7BxudrFnO8C8t5PXcTlx6Ae\nb9GBz6ZrGzqdssYEO76VlCZ/n2MBkrcj8L/WcMcDurjXr4qiWh8/MR0dakFR\nOCs5\r\n=WaxY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFl82rxP9k4CqVfegTccbZ8rJZ6XnalPUHf21eae2AYYAiEAgoFaN4jAjViDMD92Z00oZxdQyYv7gA+OW0XgC/rhiRU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.761027ff.0_1605737708090_0.3104199048083367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-select","version":"0.20.0-canary.dc93d04c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.99cfb6bd5.0","@material/floating-label":"=9.0.0-canary.99cfb6bd5.0","@material/line-ripple":"=9.0.0-canary.99cfb6bd5.0","@material/list":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-floating-label":"0.20.0-canary.dc93d04c.0","@material/mwc-icon":"0.20.0-canary.dc93d04c.0","@material/mwc-line-ripple":"0.20.0-canary.dc93d04c.0","@material/mwc-list":"0.20.0-canary.dc93d04c.0","@material/mwc-menu":"0.20.0-canary.dc93d04c.0","@material/mwc-notched-outline":"0.20.0-canary.dc93d04c.0","@material/select":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-sa1Lp3pH7ibrQj72Hdp641rFJjGrreRuJ8A25kktk34uR7WmRhy+pTfLEWHeSZnTTajsI3x/kZnFgqKrFA59pw==","shasum":"4015840e5e400ccb067ce7ecd03929eebe16cb5a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.dc93d04c.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ43CRA9TVsSAnZWagAAXmUP/05pspbCcbH8T5xUz3Vn\nBtItfVtyQB4GaWP5CGjrQqcRt9dPFLOOtIWjf1hlFCN9k8FDEcOQw56gFigB\nZc3SKFAQO62BuREY/ekqWqPs2s4AiuyCZf6/2S/Q9bf6Dl1dfQUIHTbyHuka\n7tzyYNI64lfiq0a+j4hgAKLGqZ+mp8Wo1JA5uR728lni+1idWsryRBcBx+Di\nHGTSovkppfiC7+JC6ZstmGLnt0aJQ25YLOKGv6kCu+JhUafIClMh275DxKKT\nkhSKgDsn7xKSQK3hH1p1S1njiI5Bxju1U+AOGYi534nq7RULdmEff5f7Jn7V\nZWfJm7TzNfz/Y8O721lMLV+stjaRvFtu6TsgDVIBoNmqpnGmmGBopAXNtNEE\nMYUDzz8Idyx5Sl/uipL1KxY6z6d5jZmzIrKvyclHxAjBPFyjBJ0q7RKeJVi0\nNgH1WrgeTXmF0rU6n0mcLnBMzi2/XFk2mJ05NRGDnk/7jOGh3c3GXX8WHpCi\nk4NXAPRnlZKWRP8S6/4SH/DjLEF9a4tdYk/mn4KEQnQkSonk9bjOtlQW0fq+\nu5fUWIM+/tW+9S20/AAIrIP+9pHEQ3DXWmNDpyGmPKCTFH0k7OOcFARFjfrh\ntM6e9P7oQNbRBpHIgua8SHp2fFTuiDaC/k5hmMPXqGd/sYLlsHd1vjuRf6VH\nJFko\r\n=kf2i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFo3vFEgSfRGP+wRqTQxxeGgzejH5ZujXllY13AkqrK7AiEAxk8yjNoMuW47dUGYO+beRRoeBEFWiR4LTXybYMeBDfs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.dc93d04c.0_1605738039350_0.8000803102366438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-select","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.99cfb6bd5.0","@material/floating-label":"=9.0.0-canary.99cfb6bd5.0","@material/line-ripple":"=9.0.0-canary.99cfb6bd5.0","@material/list":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-floating-label":"0.20.0-canary.4a5d4eeb.0","@material/mwc-icon":"0.20.0-canary.4a5d4eeb.0","@material/mwc-line-ripple":"0.20.0-canary.4a5d4eeb.0","@material/mwc-list":"0.20.0-canary.4a5d4eeb.0","@material/mwc-menu":"0.20.0-canary.4a5d4eeb.0","@material/mwc-notched-outline":"0.20.0-canary.4a5d4eeb.0","@material/select":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-cnkL0s7ZvnNC3dWjSgsZhBSdmPWZ0/2FYFVp03jcw6nK21MolBVkyaoyrvF+xRvmOuoi/l3DfDEdxXxR14d7wA==","shasum":"5e1334b2e2102edfa42c26f979604522e3a63551","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftleKCRA9TVsSAnZWagAAOKkP/jjgcBv76UwuzVrfX1OD\nIPqfys3Dp4ADo5J1CcXN9nEH8jzpLP0SoGyimV9ECG6IfOasmS9kZD40v9zN\nqwFIqdGO4fklakgvdIk/bbyFoDCfLyCkBqaxAXz4tc7SvvjUDIu9PlScKLzo\nw2PoWwYCbHovRshd/R+txh/LB5VUT3lOt2e6ngxJLCoGzA7xlsy5XtIe6njn\nmz+J7m1H1K0ajsg0fdowzSTIIkDRa3m+wqpcotBLPeNI/6LkxcQuGEICJ44Q\npdbEEvkHVRgfLofujotxQDnplFcwzBWyWtc5JrQ7hDdiXvDpBvdKQgJPGlvo\ndIvw9FNhTzmBkZuPdWXIssT3+VZM4E2dXZ6KAuuHhrI3ATQ2Ye9fGxLW4aRs\ntkd0YRQ+5xMc1KMAM1CHrcD11HePceX6Xfl9e+LHlGLxflMkwH2n7PNjQqw0\nEJMHh2MZD2aKMBTJlRczl7w5GK5gJnCXD31k+6xaHgakxu4ZDgAFmqtTqlq4\nFXGcZLraJVC7mgNuDcdDaQY0b77B8wzwi5auLr3Kg9IgWqKerIbFHjv8NI5H\npgU4qhTF41WZAxbkFIfxIgiE33r7STcrvDC6ERwCGm6uel5e7tKGx+Y+XXNX\nvN4Cozgi8u8eohWz80SFayguT4MqHTNojQAL39qDBt3Hyxur8TNW5eZQEtNl\nI9Ma\r\n=8JBM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvDqqW41FAv5hP61TwMa7dxaa7mKsyH0RSZjEk0t0HRAiEAtlUAlM+a73kNr9GkeHm2ssRlAZ99YYJSs2TYhJ/MS6M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.4a5d4eeb.0_1605785482021_0.4779689162340801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-select","version":"0.20.0-canary.bd176a15.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30c11bfc2.0","@material/floating-label":"=9.0.0-canary.30c11bfc2.0","@material/line-ripple":"=9.0.0-canary.30c11bfc2.0","@material/list":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-floating-label":"0.20.0-canary.bd176a15.0","@material/mwc-icon":"0.20.0-canary.bd176a15.0","@material/mwc-line-ripple":"0.20.0-canary.bd176a15.0","@material/mwc-list":"0.20.0-canary.bd176a15.0","@material/mwc-menu":"0.20.0-canary.bd176a15.0","@material/mwc-notched-outline":"0.20.0-canary.bd176a15.0","@material/select":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SHvIXSe2rzpUiLby7cZq8cuSoAovA54FDTeMVvCbW5/uzBy8BRP94sl5vVQ3GzlPudewKugnUtvkpCYqsbAMSA==","shasum":"7146a9658c8a17406a1899a4de8df8528964bbff","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.bd176a15.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsNaCRA9TVsSAnZWagAAY4AP/0ODc9nQJv2pmKCgt0XE\nlj5WNaTXFob8Uu9mS1guH0aOyrBE865Q6LZc7qz/7vy280NcclecqbS79FWL\nndXENC3XSZ/KInRoBMae8UgxIpXGicG5uQfqbB3Eg0Qyi147bUdQVjuZkXfe\nqkH4eggNOcSj2ul5XCpBGxm76YrR/KERiQCHjXU1mWpfUIOLsFA4m08ivXMA\nGdiZo+gAfkvSyjTHjS8bYuJiV+EgHjihuYxr4bT8HKSuvQzAwHEIFcaxkIDT\nSrpLBXOWGJOQ+X+0F1rTONk2wgr4GYfBVoLonl8KQA+NQBaeTJgIu4U8Umst\noeio7GCFF3lo+5DaFvW2U51oeoZ2DiSNXaOJty0WCb9hTYeREBpAowirU3M+\nU/IQXO1AIL3rybi/VCUq33RrcpNrzRL7/xkpJUe5FU89ivoxil921gF+5s3R\ncEqhLlzdFzbNwh1OkABuG9bvK/mm5gseB6jbPwOCAWua6lW2kKhSyQplQXCi\n7PNq9eW76HqhAx/F93ss7DlJEshGqo1tlW/y8w6DQ5sdS6OCbkuugW7uDZkR\nLgSKW1JsU5YbhmjgC7Id57vPavlaBFmteSWM2EFEGpsqXNmrjpuDqUjYjy/E\nsngkhMhvueDsie8HAIG19FLxPZPcXjmaRjerXiFAEP6WM1WIs0ZYoy23S8UT\nNw58\r\n=yze5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJE8/F6mgSbhkVrvZq8U7rYsBt9WT2nzLeSmBf8U4cFAiB2JkbuldD8BQZ/M1BcdB+j/sO5aRcxxixwB71eHsJAXQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.bd176a15.0_1605813082369_0.8734874323575241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-select","version":"0.20.0-canary.e85aa60d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.c927a5d05.0","@material/floating-label":"=9.0.0-canary.c927a5d05.0","@material/line-ripple":"=9.0.0-canary.c927a5d05.0","@material/list":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-floating-label":"0.20.0-canary.e85aa60d.0","@material/mwc-icon":"0.20.0-canary.e85aa60d.0","@material/mwc-line-ripple":"0.20.0-canary.e85aa60d.0","@material/mwc-list":"0.20.0-canary.e85aa60d.0","@material/mwc-menu":"0.20.0-canary.e85aa60d.0","@material/mwc-notched-outline":"0.20.0-canary.e85aa60d.0","@material/select":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UrFwagYNafwTOxFvxesGdEZCbT47RkXrGmwbrTU2hMFyWknZtXd/V9GN6ji/cBOrUOQT9bMhsgKrsc9bOaMMRw==","shasum":"5cd39b29cbf42bf9ee6c2b29cf2bc7a2a65deff3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.e85aa60d.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDbaCRA9TVsSAnZWagAAE88P/2v781Us1lZJBwGgEHhy\n+fbkxrfb8oRi6Jfm4FlaXTQyzNEefTR229nuQ5Ku+EvGvd/rpbQzsx8oEoPB\nVLr10bRogkOzeNhQO9cMWZNpuVBp0OHaQyakSmvGXwHn05HxitQ4UGgsmcRi\nQEGcfy+n3FFaj3a/yMTxMsziJj2jZsfeSBnv33jS22FgDx56N+wePn0pMSUQ\nMWDoRmij5yz8oQA1+WVpUEWzrHM+myluubOQt5hBJfXRy+ab1Jepcujb5mB4\n0nTS2XnJEh5gYFKXE4SYGbYqBTSKQCkKS/EmKgfqEnnvZHvdjorpNb8mwXBY\nzJnrITUGZwWUZOcLaqHpN3f86rUkDA3WeY7S6ZR//IBDSA27AwJ3TATMWUa9\neIqvEIjm7/nbrIc3ywfUgWk8Xssjku8Od4N6TiBzaNvg28XoWq58vP55fRSN\nljWKfiFUAiOZOusKn4/0aJ+dXUzdxLM+/O7DGNTnpoSOxSZRl829i9SLvy00\nKw4SI1PIwZRhkrpSq2ThPCJxufNSrXbsHUMcrQ3VXk6mSfdoTVAd40353MvQ\nmPeNDvrVmYv3E3IY/UOkxSERnek6rscDcTICBgymETuRHkDnp/4smN0jMcna\nyzjT4c3rK1voj19Ivf+S8h/DGt4tDU0ComIyu/r6itcEafiWMc1X2+/A2PH+\nfYcE\r\n=Ly4b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBl9Ke/jKmzE+DD7KjoldXYzDcNqs89PZUtRUK6rr4LPAiEAi3DxqBNAp80TJMpeVCFNJdAx7EgX9qBxiuoJbMswy4c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.e85aa60d.0_1606170330310_0.428811724153604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-select","version":"0.20.0-canary.72092360.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.c927a5d05.0","@material/floating-label":"=9.0.0-canary.c927a5d05.0","@material/line-ripple":"=9.0.0-canary.c927a5d05.0","@material/list":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-floating-label":"0.20.0-canary.72092360.0","@material/mwc-icon":"0.20.0-canary.72092360.0","@material/mwc-line-ripple":"0.20.0-canary.72092360.0","@material/mwc-list":"0.20.0-canary.72092360.0","@material/mwc-menu":"0.20.0-canary.72092360.0","@material/mwc-notched-outline":"0.20.0-canary.72092360.0","@material/select":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7eyMGdcdo27t7ssPcDEskPJJFmeE0XfgY5fOlCLZAa9JvSv1eKwtHxw8BpsbG6Ans1U8mSIhpYO8pY4vj7Ofkg==","shasum":"3f972c258bfecb20b224a1dfa4958c564c0ebac6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.72092360.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImvCRA9TVsSAnZWagAATJcP/1Iz6yv4jyh0y7rFWVcb\nsW40z/766xmVW73wpXc4P3idDwRmvMYcXoEaBHmYcw66kAjgDTm0E3R+RkrU\nrtMhb0EiOjDPrXR26d5rGzakqui1ZPhoKwzCAfij6r8I67XLIF4P1b1URF1w\n/FmVuhu7IDQFAd0IYap58w9HxZ/xXxBDNpE2RQy2YKDpvuFslh3aagxsJ9l2\nzKn0Xo2UTg8UawYuv0+MNjh7zis7RTtqBozFV50hzwO27bO3WXqJ0btKGR7g\nsRnATSKsnX1TicokbY00gmtQd94tZwhtfzePsJvf/0Scr1oOnNiOpZcDwyQ2\nYtnbf3Jz5CwUdpqUUcDDJyqqMI3sshFrDULSWYfHmMDjNb+b+0/eA5fwXAf2\n9AVAoDm452dH6bqUiio1yIg6r6I/tpFQF8Q0gyciAOoT9Zw90HI6k0tedN+M\nAV3MiK1+bXyQ9wxWllgYQxJ2ge25j3ZY9Zq+JH6T2DrELJOu5IczrPMFhDhh\nvCY1tU/NjkxkCE1RsgqqahW6ykaphy/Bmn/x1LeNDppjVS8WdqiD85ZFohw2\nxG51FXbXVdZQPKL0Hwn4wt1lidCUkgViVs6fg1LrC8ke/cETisPq3jnIa9Or\n99DxtvtjW9aWxt4WGyf99AUg//A1/8+uzROQVcrKsgggfxmeRv/+q0R5EGGu\n3hPk\r\n=ZVLV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFBf9viRaq8HRANVL/bolpn4ExuEysDC+TNXh5wyH5QwIhAMl9K4LZMIVRHOvukTU+Td5lBZSXnTJ28J++RCGogKJx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.72092360.0_1606191535267_0.5347403543874147"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-select","version":"0.20.0-canary.baf9d39f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/floating-label":"=9.0.0-canary.ae27b44b0.0","@material/line-ripple":"=9.0.0-canary.ae27b44b0.0","@material/list":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-floating-label":"0.20.0-canary.baf9d39f.0","@material/mwc-icon":"0.20.0-canary.baf9d39f.0","@material/mwc-line-ripple":"0.20.0-canary.baf9d39f.0","@material/mwc-list":"0.20.0-canary.baf9d39f.0","@material/mwc-menu":"0.20.0-canary.baf9d39f.0","@material/mwc-notched-outline":"0.20.0-canary.baf9d39f.0","@material/select":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4owGtw3+v3HcJDJupfwI5Lorb30CES7PGXdHCuGT06Ku2OQpl3pAeZwCqm95VzrAQIad+HxIADK6lMEUZAIONw==","shasum":"b0058b330b526d525ebc0a42afb9e734feaf59c0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.baf9d39f.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtFRCRA9TVsSAnZWagAAJn0P/1e2IMN1ME/9WLCLd+kr\nhS2KoS0x+M0A+VBXBQp76Izkdm0fzIrU/pj4m6Zuh/BohPEolEskBypzTrYm\n2NyBwRDDmskUd5fO1+QvuZPBz05D/qxn8VzhFIpGbp+97x+WZS4KMG8bS2b3\ni5OYujd+/LLvXsN9Fs7IR2or6u+CdeofXGAIWl3uG1cBjCz21yH8JkOrmLe/\nvQYeORzCrrvYCrGcApyUpMHyqErymC7QQHTDAiayQKiyeyiFKhvhvKllO78N\nSEuXHph1qSQAYe+QTHEbnHLxqwge2pS662wONZzxqnUFE2ny/KfJfb+p2xxt\n8EoMNTESayMLxq5ZOYqrt1tpE/RjSB02s8rHnP+WR4EeM0BTBfuvomRO450T\nj0IB3PT+OnK0rz7XTffZnUuIKKY7O8gAhoCV9BBhRMTDEvSWR9sfV8VO1JOU\nUH+l+sC6Fq0sqv9IKhK3KMWOtyjDzVeN+Nea4k71fiI6ZByP+qzfLRZ0X6XL\nQ7//bKw1T0ceV2ofZL3vCfXhBTANRz0WXCRTCR358njpp240hGYC32uNsUn4\nLKOZqqeRphk6kLK0l/9roVpuqCq5GXmmbtFUFDTMGvQPXQNW0McSM4q7LOsw\nXKmJJ7dx0vjGS9MBZB9HaJA6ge/TGPdDo7s2xOyDwZ4hlFBJ+Zvws8+rQIGp\nxTi9\r\n=Ur95\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaFCuCDxZsLKZU5MkOwuevl156XeFhL8SQYAcYaweUSAiEAsNFKWzbfck7p087slRR9PBHecSPddxYyBULnUT6mbfM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.baf9d39f.0_1606340945090_0.6071223163686801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-select","version":"0.20.0-canary.51aab0ad.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/floating-label":"=9.0.0-canary.ae27b44b0.0","@material/line-ripple":"=9.0.0-canary.ae27b44b0.0","@material/list":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-floating-label":"0.20.0-canary.51aab0ad.0","@material/mwc-icon":"0.20.0-canary.51aab0ad.0","@material/mwc-line-ripple":"0.20.0-canary.51aab0ad.0","@material/mwc-list":"0.20.0-canary.51aab0ad.0","@material/mwc-menu":"0.20.0-canary.51aab0ad.0","@material/mwc-notched-outline":"0.20.0-canary.51aab0ad.0","@material/select":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-nDHoDqbCShJQpprbRsxv/TpQT1o2QEiIuDMjBbwQTAOMIF4ZqEeUheCVtS1MmSBlyxx7B8gHJ6jMz+sf3yn7IA==","shasum":"f1a0a6c07af299419ebd3688adeab0b37abd627c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.51aab0ad.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZcCCRA9TVsSAnZWagAAxa8P/0fIohoUEUqEAM9kzBUy\n8W7EnFxcufN1Em8P/cdyxWdigV83svotXiT7TUhT6HAxlkLEf7TOuaxXrDYo\nkWTIZ3BS+5OSPMiS3rPk2NkDzOdFKd4A60176Ckc1asyBinWjhw94lMKSrqR\nGTvQg6DxYMh/QC7XPR3pqRo4Q+oB6wg6fy5lxTM0pNP9JefhydxJ5BBRWfcF\nmENFdNDuMGfwjDss2c19lcz5NWCpCqt9xyoJm9pIefHFqALuL1vXTD08DtrZ\nfzMGB5hRFWDJqjPqHerRVrR1S2pURLO3xII3xmCgzKbo12BPlsGFKk+RC8MH\nrOHgyt1/Kmlb39NNmYlYx+UIdHChZrvtfepr4GgwhtTSR9pWAJRpvO2XfwW1\nWeG7UdVMfrtCj97gzW2SaiFQ7C4fHT7Rbc9PAwSi1xfagoRoksaul633CpmU\n/QFWSS7gb7Y5o9V1YWLjNHM4S8ByWx2VNJSk9dWyYIGzIzaI7/m6HGvlhSiI\nXKAeqTe4h7Nap7q3s0AW1UJI3eneSZmVgJq2wDdfdrdSr3HGb0AHXvWwowqx\n9Xe8o0u0CwgRov1HHdJ/UWmEbDDR3Ulomy7af/jUU+0hqR+7hB4ur7Ykjv80\n7uLkCRrdpSiAMNOdbWLOCo32+42jbh9mVYuce79da6o4lu+QuMNmRRkX9+ZK\nspKr\r\n=jqoU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHd6JMS60Im20kuSrN9YyY5WivPd7p9vRDwOhS2Pm15gAiEA5gkCPCzlHFrUsnMQO2wgPdZdWLoIr+2gQdFKfAcO8XM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.51aab0ad.0_1606784770454_0.8626545060059323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-select","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/floating-label":"=9.0.0-canary.ae27b44b0.0","@material/line-ripple":"=9.0.0-canary.ae27b44b0.0","@material/list":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-floating-label":"0.20.0-canary.8fd4af5b.0","@material/mwc-icon":"0.20.0-canary.8fd4af5b.0","@material/mwc-line-ripple":"0.20.0-canary.8fd4af5b.0","@material/mwc-list":"0.20.0-canary.8fd4af5b.0","@material/mwc-menu":"0.20.0-canary.8fd4af5b.0","@material/mwc-notched-outline":"0.20.0-canary.8fd4af5b.0","@material/select":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YC4zZg/ir7ROYUmePmLz7FVqg46G9M3kLSbVowW4+3CfVY6S7nvg8M3UKSh5rne/ISb2iWvdpGAho/SLo5O5qw==","shasum":"07ed571d4dfbea14c8a7d16cbe8daa6ee1853abf","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.8fd4af5b.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDESCRA9TVsSAnZWagAAf6gP/0jF/qNd8c0jn4RHTW6e\n1lwEWU72qegR8+H2kYOxHDQJXaOZQr5Hu9oEcD5XTh9CYpLhYjXug+7jjvKB\nDjtuzubFDzF6duJiyATgoaTZNTDMre+4M5VuDR8rNzqrGabUEIwq7VLqY1jK\nDcvWdV9vTc6icbMoZ+3Q3p4l8M4BSlUQjYSIiJUH7x9SupU/PGRabFf58YxA\nBw1XqdtgeFpWgmajGfOYOd/IkkTqcYKI4jrF6W/oOJ6ZnJ3TZ1HKsv+UgC4Z\nC5bTVB2yehF4+5jJEKWC9NHSahsJXoZqBihCsS2qPsqi3oYZTdrWUIfHcBEp\nrKm/EcxL1WOfm0tNfoiBywgeHn28Nh6WHF43LnfjRuLne0FvYbj0a4OGwBWZ\n6+MPGhYOuk/dE1JHIu8ZrRzcFWP+oniPJG2+fk0Y1KL6Psk9cY45vHFb0ofI\npwnEtkFQkbOYI6RMtd9XAO/MpJkDfEzNOWPyqd/eMW4uowJ4q6gkGqSGqnkW\ndycxlwyn6q9qlqVW1OXceikOKebNGRvPWdM5I9tsc+R1LphwEfg5bDzOLigf\n55ep+eDuTRKcF3RSx8vqXVMZziXOsNu0FCzszvZBz547Er7J5j7djpE19Br/\ntICYYyczQwAZuEwcOEUFlnjFKk3ZJaA9hA+YpIcJW4a1uLr3FeM5yyZHNb+I\nNj5C\r\n=aqTv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPTftNBB/4RXh/uPR7oxqeS6oSyVn8DFFXNF4nsKO/9QIhAPq5HRy1Pq8uW9U7aq4Yj9an4u96tSmyLzqYqaH5KqWd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.8fd4af5b.0_1606955281795_0.31189095652486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-select","version":"0.20.0-canary.26d14d2f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/floating-label":"=9.0.0-canary.ae27b44b0.0","@material/line-ripple":"=9.0.0-canary.ae27b44b0.0","@material/list":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-floating-label":"0.20.0-canary.26d14d2f.0","@material/mwc-icon":"0.20.0-canary.26d14d2f.0","@material/mwc-line-ripple":"0.20.0-canary.26d14d2f.0","@material/mwc-list":"0.20.0-canary.26d14d2f.0","@material/mwc-menu":"0.20.0-canary.26d14d2f.0","@material/mwc-notched-outline":"0.20.0-canary.26d14d2f.0","@material/select":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bHTjsYCeO0HDkgwkjAMXRDpOxuYIWPt1PakglHIKgL11zkHGAM1+Y7qasHwSgZkbUauNJjYOQ7HFx9yIho/0PA==","shasum":"09984ba74917f6e2e3ad1f75f57c55e7cb4789db","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.26d14d2f.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDfJCRA9TVsSAnZWagAAiUkP/17jkTP02SnU27hDT3bC\no8DVloSvy6v5A9vfHhdVZRIC5k1hYHDnNoBY3jjNAXyAcZMnzt4ANHcwVQGt\nlrB2Iu/bZsT79YUuDqH7rMriq0K3hmLHVDDQ/rQob5oDkqWZvlnOtY54xrpN\ngeIPCN9Kz4UWTqBqDbNAvmOh8cXI4uCSAPHmvUbllTq4qPVSjTK7t5mCzJ7y\nPsoXzg55cXPPR8bk6Tms9CnhBEXJU6nOvaVOOZLFfAn7YREmDgST4Y1pFq48\nQeMOTo7Y36IVFJwyzSCw/y9kXvJpWiAwaFrK0S0bqptsNesCKUvYih3p9UZE\nnBInmXXf9z38WFod5S/avQnprT2sRb/vW/xlISMbvyg6453XwHr6pWVUpLk4\nhUOgdeJgbwLcVC6VU+cYR/0sARfxqyxGkfuX7+QCKtSaygMYxosu7u1laLV9\n0YWlEfPMJck6wY1qwOvt8Huo+3Z2B8Hi/AMs/YeyhqJ2WuS5z3MQ6lkUmzds\nGwG3lJNuf4Hm8AC9Qw1h5ILtLDau6X/7UIxeEEM/OPcswuRUZxcOpyAr1vh8\nLezKIKciDBCAlEf9SCaPlz9Lhj2jFAacAHzE8sYo/qf7sUSyrKI+RQ0gPrB2\nZ2v4Dhmdwkt4U1SlLQrr15PjiHsnChkLnxoSwS7n4yi6Jl9073F220puAjqa\nURqT\r\n=syYR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnzXZjX5qFyo6F6lMFHRmvmQjVGpW3PFppKKs38IbLpAiEAuHiw2DciGcf9CN/3BJbVQpy8qwha/ku0kGCH83pZCt0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.26d14d2f.0_1606957001258_0.2202813043392251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-select","version":"0.20.0-canary.1663d7e4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.11da3c0db.0","@material/floating-label":"=9.0.0-canary.11da3c0db.0","@material/line-ripple":"=9.0.0-canary.11da3c0db.0","@material/list":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-floating-label":"0.20.0-canary.1663d7e4.0","@material/mwc-icon":"0.20.0-canary.1663d7e4.0","@material/mwc-line-ripple":"0.20.0-canary.1663d7e4.0","@material/mwc-list":"0.20.0-canary.1663d7e4.0","@material/mwc-menu":"0.20.0-canary.1663d7e4.0","@material/mwc-notched-outline":"0.20.0-canary.1663d7e4.0","@material/select":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-urJX/KfFHVRV/3k3p6YPdvseajGI/BwPkpfAnnMhw6/gcZ1bBOn5HdJCL3mrJjwTzGlKagr+3KJX5R+71q4zhQ==","shasum":"bd577eb3612a5f1651ca1d50c569a4272e60dd2e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.1663d7e4.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDycCRA9TVsSAnZWagAAnl8QAJhPaMIh/l4xHNithGh5\nMiswZy0Ht/cYxUKEnS4OKa7WLIcf4n1udFXrWqRyy4VkLWEkC9ulLItkU/dF\nk2p2QNEHXLJS74z6iwofw14BVg5cgf6cAGgZYkGKWqsaMuwJOoaGO1fzi7vl\nhovtl3/D8yj6iMHOzAzwqu7qdfgJwQ+t1/Q/ho2/iawwmcCYJcvaYxxDA+au\nE3852Smo9Oho6c1QwOQjrwbQzv8r4wrcT+BFUR/FzMzpI0A79ajYf4GexGzZ\nVAIBehfL6JBcriR79CSFszg+jLRESvlT+LsXj71k04eMVAN4FYJ0CSOT+k/0\nY+rfxdbn96nV2y3a1dN/2Yi4HqiUbcbR1KeVVs1MLee0zp9F1fzcj3NQM6Df\nIW9Zi3kWR+ncF9oUPrfKs80gfuHIEAF75/DHVMpegXp3+fTj6QHtxbCcTC/R\nK/MZ5rnNBnxekqKO8u3jwj7tMWsIieV1I9hn41ARd6zKYaFFbrJvOvCndLc1\nn2l/Sm7aP4YQbg/3R7b7WIGv7iEavfQiRd9h+H/HjiI2EUnYrWN+CGwKPezC\n/nWol7yW4Im40hItWVZPMrtTmh/5fPyHGTA5rvwc59GCmrg2FkTpYCk1QqEU\nbTYYYEk0kK6UPWMR8XlgWsyWZaFAd7njKBZoko291EmAmF5obWNAHcMgEVxj\nM8oP\r\n=12gg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmE6e3E/QvdJWW4URbx2y7qLtH5/CutEUSJGyNx/fc2gIgexkpEEjj2yAq0ijuT0XBUKyInbukbyKXv2HvR/52hbc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.1663d7e4.0_1606958235652_0.25524279349590584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-select","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.11da3c0db.0","@material/floating-label":"=9.0.0-canary.11da3c0db.0","@material/line-ripple":"=9.0.0-canary.11da3c0db.0","@material/list":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-floating-label":"0.20.0-canary.cbe9fc12.0","@material/mwc-icon":"0.20.0-canary.cbe9fc12.0","@material/mwc-line-ripple":"0.20.0-canary.cbe9fc12.0","@material/mwc-list":"0.20.0-canary.cbe9fc12.0","@material/mwc-menu":"0.20.0-canary.cbe9fc12.0","@material/mwc-notched-outline":"0.20.0-canary.cbe9fc12.0","@material/select":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ydd1uXQ9Qh2+38nNzMD1MQpNeW6Z50TtairlGD0JcdJDWYlNqkkhkwTgqOX6FYKB7EzoN4PNORQ0sov4PHUrAA==","shasum":"7f1b8d8665a4aa7d138f601cdfea6cb77ac968f6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.cbe9fc12.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTeUCRA9TVsSAnZWagAA+OIP/1jIsww7BWFKQi8lTt9r\ndHw2RQNKHPGDBrnjEgdvnlLlM4RfI5DLyx1fXLU5C187C0NyRyNkYZtpMqQ8\nGd0RMUhp4OcLkBPGurTOydsVv3K2vwgte3gnVHbsm+BeO4wPd66Uz8XNPrei\npTwJGtq/33h93V+DBL0RZY7NQctZb7OhqaGEbxpbuv8En/ihCkocZ6h0W764\njWD33HqHYenJVFDUUfxZHYHCJI9e9iKozk4kXhBlGo8GEARuAEP6WLtjgmFZ\nX8l+wTelVLgPyoNPoSb2Vph7vwePVRb6Dx0VG9YAl3eX9sjEqcELKfYspLP/\n0DWdAcpAUMNQNEkGNvPZi9fIozk8w/KxELc217wVoAF54Qj8tSTA+We3Zl9F\nDHv3JNXo8D7OCNrrbwotTu/eS85zBDoYjNWKhIhPkKqDc46MP3gcVNHzJaDL\nCKd8Uwq/tZegIYkdJhnQlnuKo2NYRxLLKmMVunJ+Bvc2fOUN1MSMDp0EthOR\nxRPfDhyYYjSS/MLsVJSRNw7UKLdV2/BGCYsoPKkNhl8FJpew+qS+q94Ets3B\ndmx/q4R1RR3CnX6BfZvZkUCksrcmx65CajuBi9b4J8z0bJea4hbAuhTQwd5k\nDQl22k1SgtZBS0drrP2iNyiucmoyRk/gFmI3I1uhDhWeTD+D7UqrbUIDGvH5\nLUQk\r\n=VdXL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCymoeNcJ1VWCdZFYqkM2XNuMTZuuMSkhozQy01v6EA5QIhAOWt+iBwGgirmqXBMyISK1XXbe2WD7sfQCFyiztNlYHR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.cbe9fc12.0_1607022484071_0.21676183009701933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-select","version":"0.20.0-canary.9755be10.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.11da3c0db.0","@material/floating-label":"=9.0.0-canary.11da3c0db.0","@material/line-ripple":"=9.0.0-canary.11da3c0db.0","@material/list":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-floating-label":"0.20.0-canary.9755be10.0","@material/mwc-icon":"0.20.0-canary.9755be10.0","@material/mwc-line-ripple":"0.20.0-canary.9755be10.0","@material/mwc-list":"0.20.0-canary.9755be10.0","@material/mwc-menu":"0.20.0-canary.9755be10.0","@material/mwc-notched-outline":"0.20.0-canary.9755be10.0","@material/select":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-k3+v1JLCJ5s95RlZXWX030YMrAZ4HMP4q396n5ejhAWHhagd02oY5bF5AuDS/exgk/3b5jlsmMBbN5SGtG7RoQ==","shasum":"24f7777d118298f6f75ec0b8e271d9555d86742e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.9755be10.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTvPCRA9TVsSAnZWagAAWZ0P+wQWN7T33XjSHB3AXb6C\nCF6+/lZlwUUJxbPDnb5tick9MmJDfLqbkXRh0on+5wASRCyqnyWDTNjseSvQ\n32GVCINzRmWCevMTe2k4gTMmjIAs5PZ+JnJspHz5I5bd4Wfqo2n5S/4Ny0jA\ntb4Z+aMwEJdhAy/s7/snrgHErh6N5gkMHGM32VhmRh4hSCf+qfkNSU96v5Kq\nj4Fw4c2z19m87ygP7YwBP/4YKaHwXTVfP65re+h75RgPVzsrU/Ynv4x02lxC\ntT2JJeVaoyc5jzYsewsje0QDEinG8fgHiIjch45bdN+fW6/dBXnSk5/kskQg\n2g/9Z0eQeq8fw1k3IUtqkGdDHcbLMgx+mqx/5JIFLYs8L7ctBsW3HxBW+3q4\nUXbgWaFYopEHsVn2zGgz0zNlZlqFYkdalO4rgznLcZmh8tjIiiTvjLGd2awD\nqj3FpF7QwO0EU5/V6oAJz/1uMhv2+TjW4JVIc0GHUwN9cMrQ1ykVVxzCsRMe\n3bH6JuSr/GI7K9NWusVEDXyEbokgLsqmIBwr7EIJzTzfg50c99j5X0iBLgnD\nkBnprIa+LEb7soobMKYUo9GXIq7oziw/97+eEVtF6D4dYNer4iuARyBhozmQ\nfwzMS/2zd9GAniPVJiH+E1daDOZdKa9Q1sFEtn/yP1w6Gu236BHZr70jAJ5c\nVNNh\r\n=WoCq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIApmT0FZqIwjJ0ESrym7jAHJS7Upf58Q64K2ORyABrv8AiBIGfqeJbpy635YP7ZK+jk3KUftAC646E9+WVjQHHVsUA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.9755be10.0_1607023567131_0.7251783889746066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-select","version":"0.20.0-canary.3f64270c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/floating-label":"=9.0.0-canary.1c156d69d.0","@material/line-ripple":"=9.0.0-canary.1c156d69d.0","@material/list":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-floating-label":"0.20.0-canary.3f64270c.0","@material/mwc-icon":"0.20.0-canary.3f64270c.0","@material/mwc-line-ripple":"0.20.0-canary.3f64270c.0","@material/mwc-list":"0.20.0-canary.3f64270c.0","@material/mwc-menu":"0.20.0-canary.3f64270c.0","@material/mwc-notched-outline":"0.20.0-canary.3f64270c.0","@material/select":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-allNOKneDz1Kk4FEUHYEWzvq/yTR8jfnNWWjSA8R/bt5d1BVB3J76q+aQeV4oOfBt+yFip3fdqSstuASusxylw==","shasum":"d7936c8ceea88debfb16bc2f92421965a7331740","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0-canary.3f64270c.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2wCRA9TVsSAnZWagAADJcQAKKWwy74TMkchdo9KHhj\nNm7QVRHWMJuqeME3rKzuw9BnWQnYAATU3G77b5Qcm5pTVmXXT6wdb3qBKiBF\nrRUdUF0qdq3LWi18/YA1kGroMgMupm+AUJif+4kYkr9pDtiSpAX8iZc40/aj\ne/o9o1npT+sjOJuVHNgbrOxY3IjdGh5FTZtcyazTWZwrW11p/DJFkEF7GSPZ\nqxo5gfPmvAnEm9odvHT6drbFhYn+jugO4HKFDEwVRXOD0AnwKtAHt/TgSQK6\n00vZteEr2Srzxp1ACXabaIVlE4CQDbr0cPeKEDFzOLpLoDdIzEzrig5nB84Z\nc1tOxxklLIbneLbeTY0I1ZR/4g3S72Qnz2mGZBIUq7VCXOGtaKoS5Mn51APu\n+B5akLUO3PCf35sQsLPF9CO+7YZq0XPJt3/LrYjjEYUsum6P7PavkSlGrrYs\noNSJrVwlbgnRHFOGOqLOypFeFxwKqAE1EkrFjnccUOdPch9aeWT2UUWnvy+M\n6XR04KmY3u0AjLh0G9LTTiBm4J4xljoZrazYQVAmIugKD6YK82/FB9VF0/sb\ni2wKIMLih1RZWivhRtKjNDeprbZNZCc1xmnewxbbIrNeW7JoNjTmp0cKL+3O\nRVnjvltw31LL6WVUnrhGXxBZKpnWYSffog6LM0QwXDgVqP6rOpkOMsyv68l1\naZqw\r\n=YVvy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwva/nkOqImM9o5RbsMx7t/Q9/rZmZdVExiGooFjYnoAiA7QBJmJAl4p6qHguJeCb/p0eivR17ciQAqrfUbwA+5sA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0-canary.3f64270c.0_1607032239810_0.9941352784099795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-select","version":"0.21.0-canary.d893b14a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/floating-label":"=9.0.0-canary.1c156d69d.0","@material/line-ripple":"=9.0.0-canary.1c156d69d.0","@material/list":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-floating-label":"0.21.0-canary.d893b14a.0","@material/mwc-icon":"0.21.0-canary.d893b14a.0","@material/mwc-line-ripple":"0.21.0-canary.d893b14a.0","@material/mwc-list":"0.21.0-canary.d893b14a.0","@material/mwc-menu":"0.21.0-canary.d893b14a.0","@material/mwc-notched-outline":"0.21.0-canary.d893b14a.0","@material/select":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rtKKZnV8iQOJ6EDgGWLmhqfbFpBbqiHo0vvpT7l2iNt8wUMjK/o4kwmkV+ljFPduLWSHg4s8F6K0v2xVJYyplA==","shasum":"6a052304c4c569f06a5a0a1c3ef69be0c06b0d9a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.d893b14a.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWYoCRA9TVsSAnZWagAAgVwP/RiAs5kM7Pl97iKGYLLU\n05zlFtnaLqHOsY99kBL/+tqBdY+MhnRecnv++tCto6U/GTITEH9bzfOwyUjQ\n/f+waqZWUQt+OCp2it0e9k+L7OD+8gdytstPpx9vcfDo2LuUUwILPkabvV72\nMDyQfYGDnAzlbJW9JDacfVkKra4n5C7EKtzFF4Vym5rRXy8OAwigPGbKbwnX\nB4LvIHFE8NSgaDJtgYoRgrfjoGCbC9HG6+DLHKIw397V/R8cuNC4ip7C846Z\nSKsNbbqFDWw4TzqRLxMrL6/ANBnlb0o5RJK9S/Pi9J0WEx4dbya5J/RUDkiO\nNsaVRo2L/sgkAZZmKlTJ8sV/iPKDDqgCzSDcE1RxTIlO7rVJ1rSl3kgWtBfl\nN+oBKvaUkRAfziv4i1J5RIY88R5S/yHSK+zTOFtTQuYpMBct71AuVS2XaDPE\n1JuvjW1N919OkWFvbUwPtZFXyR1GOQOLlm0ytbALTe8lw9+FdgNu7CriMrjA\n7bd1Vb5+zS1b6djMIoLA6XwI/clmvxBIdnv4cx5jq2HwJ+K00LBB9qLVr3SR\nnOyVFtY2i+k6JabGcKuirl72y30/D3GWgWY/TsNRiDzgLQKMW6+i7Nb5w2JN\n5R4tnu9WFZxakwX2USHUU1LgmeSM2Cm7MFh6XwVYSQPAxt34/jd+7zd4c42J\nmyzc\r\n=ALH+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2PIxW6c6mUmbvD/Q8PIclHAJ0jRcUaY94plc7VKkkCgIhAI2JeIJKP+oTlZuU10Wc/8oVqQVIBjZE39vnFPbwTiMP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.d893b14a.0_1607034408200_0.01722885295110599"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-select","version":"0.20.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/floating-label":"=9.0.0-canary.1c156d69d.0","@material/line-ripple":"=9.0.0-canary.1c156d69d.0","@material/list":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","@material/mwc-floating-label":"^0.20.0","@material/mwc-icon":"^0.20.0","@material/mwc-line-ripple":"^0.20.0","@material/mwc-list":"^0.20.0","@material/mwc-menu":"^0.20.0","@material/mwc-notched-outline":"^0.20.0","@material/select":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-+uaOenDKMU+td6FEJBcqRzNgKKC5PHBWOgi+6oUQxSiYDvGmZg3ABhafVGLQ/EG4y7CMi9YruRSYrTzQTPIe/g==","shasum":"7da6aeea6ac873e621c9e48e2eea92e785e5e04c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.20.0.tgz","fileCount":13,"unpackedSize":201019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWa7CRA9TVsSAnZWagAAMEcP/2erx2cChNIVJINf+LmY\nXly6hrVs/FlAYP49wvbaxJWdAhHKXyRcjGuX3X86FTMmPMToqeQinrLi2ijY\nnEK/0NZXhmdB9vzzjMU5fjHFDZHekE+gMZo4O/uQG6aJGdA5Xu3kzbjHeugn\nMR6EFGGi+Xr0wCZGiK4bXi7ARIk+RB4r9618oyCSn4o1c8uuPydsAPuh7y+y\nZDcdpYLytZi+rZv0K+4WIhOKnHwdlNVyfqCHmHYm4bNJZQeqIjeGRhWV46XQ\nwuzOZCbSlnf2RyDi91Myj+JSWXB/rppcDRQSjvJuThsHaxNZR1JMxM9bKfwg\nF3gK78WYCWGAJ1Psc05ZIioEy+JJt8ho4AUXFeYMSWzByyDbA1M8lIrbrJEf\nk3E1TUCZb+K4P05W0W19ndKc8oKc86gPWvS/m4VNsDdP+zBVqXWDo77pwLb0\nBdwHEmoaBUnfmKJtmQtpYR/+62PTEZ9qLUhlUzlFhbof3cWOdLXQb1weIZ0k\ncVVI2GpytXUrt99i6sRylat55gcnQETki1Vnj+0s+ca8mLEFTG31JlYYAv8N\nFqPzKBbio0fgTpdMZ9hdGvWLZKTr3ATBg3BrwBLZasTT3lJH1vy+okiZf09g\nhu4q8EEqpvk1n8a0F6UhkOVlfLW0g61THPMZJ/ylHNMylRWRqVtsrP6D0but\ntDJQ\r\n=b9nR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOeSOPR6/rMN2G/4QNQenlpXEVcPe6qnNqLm8fmqF0QgIhAPHgLNXeD7kDf60UVU7S95aimI7tvXIw2x0P7z8jn/20"}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.20.0_1607034555176_0.66881896416059"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-select","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/floating-label":"=9.0.0-canary.1c156d69d.0","@material/line-ripple":"=9.0.0-canary.1c156d69d.0","@material/list":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-floating-label":"0.21.0-canary.47c7d7e5.0","@material/mwc-icon":"0.21.0-canary.47c7d7e5.0","@material/mwc-line-ripple":"0.21.0-canary.47c7d7e5.0","@material/mwc-list":"0.21.0-canary.47c7d7e5.0","@material/mwc-menu":"0.21.0-canary.47c7d7e5.0","@material/mwc-notched-outline":"0.21.0-canary.47c7d7e5.0","@material/select":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AtVxqrP8oWIIifNudGTorP5FLPNopZ3ZAk5eGEHABfs4oe720Sp18uVx/6Rlwvt+8nS0PcVAr7+ZvHDhVWUAxg==","shasum":"d39f183f17e8de813305e6f1de278ee7fa4314ac","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.47c7d7e5.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088uCRA9TVsSAnZWagAAz4cP/1cksZNayJOEgxkVkmeT\njGS6qNlYkICS5/OJoLXujjfRTV+EdBV4vT9qdYSq7UnFam5H7FxI6+hkh9UR\nZ4djAUeoBQ8QRaM9/6I8H6gy4h3QXDQ+OVgGMxTHu0WKJuSE6XFVQRu3yL5/\nhAlVl4BcXxtEGOlP2vU7zA3bZSp5GdbfuRNulf2+9q1R52XOLwBVR3lasGVm\nDPcSAmF3fyWDVWEfvmvsEVs+FJfZp/rmn9gzvuBHDGHsUFT1d3Uz4GuOAVX9\n3u5pB9phSsV4FyzcJSqQ9ljdoBNG8D4qvbi2y+Kk55CHmwww//yz4ubdJa/D\njC7THaqhQmXOC38fRWi/uMXOSpvgFIJ6P+eGLVPWYcaGkP+L84Hk1c//XoSB\nO0yNgRfHIN1BH8SFDTTZFwNea/1HiMaTgaT9naVXP/dJ9mN2zAs6VHBtN6cM\nvQZbv9Geja2rK0muGZCaKzqSPn5XP9wyxmGTwNCtnnJb+kqVk05BSvJdl318\nIzKMOy3Wo1mw+/xHY8K2KoKe//dHxDIDKz6OWk30Lbi8yEFQKjoZTbKoMs2z\nUs5R/g8g7DWD1/+mDXoJH8/0AK3LXmBDkUP5H09DKSjLjsdEw2FXvhPEv93/\nV0ygLrrg9l/cp++T3sHqFHE1ZWXVRJr3q9Q8eDRbLkmj25O/5UdUjrSnn+3i\ns0j6\r\n=IKTi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBRoTQjIag2TjGDHb5URrHrX+HmMfWKImJRELOwRF66eAiBjOg2sTcwHeU53tDNPg0u9CnFe86PWFAlMebWZ5X527A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.47c7d7e5.0_1607716654279_0.6530321962520855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.b304a78b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.9244508bd.0","@material/floating-label":"=9.0.0-canary.9244508bd.0","@material/line-ripple":"=9.0.0-canary.9244508bd.0","@material/list":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-floating-label":"0.21.0-canary.b304a78b.0","@material/mwc-icon":"0.21.0-canary.b304a78b.0","@material/mwc-line-ripple":"0.21.0-canary.b304a78b.0","@material/mwc-list":"0.21.0-canary.b304a78b.0","@material/mwc-menu":"0.21.0-canary.b304a78b.0","@material/mwc-notched-outline":"0.21.0-canary.b304a78b.0","@material/select":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aLyKKdXnGcHy6IOg6Ojjk6jUn7AthaQ5SD6/XFvK5BRKwwQQs5h4O/b3rCPtqBVvySy/kfJyyCks0Ypc+HOTfg==","shasum":"78d47c4bbd87ad6c41d64c1f43d3e7d51da5b5ab","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.b304a78b.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RbiCRA9TVsSAnZWagAAq2UP/306nwrH5ei8BEI/hBF+\nrjuMcU/IzrESu+dQqZ6yHcV1R+sfHAGDFhxb9RNGTqXe+MxJP0GL/JVimeEr\nz9cDg56uUtiX/D3W1SGCvt6r1Y1+5we/MHfEwZRWUMQZrwVgL2QNZLgXpZnK\ngvrMa8q/WTK3UmHVqPgWG5HJNt0tCoeWs5SxngfBrYiluuL0w6zWxBDYfDQU\nWcCh095gfaDeAlRfKszGDOdA6+vvnGKRcIJ7b1l/sVmBpbc4lX2vCNLLxN7l\nYRNTC5KWN2jtQohay992Z4UES/MlIaLPIVKU0YOqdti98fZe/b320nFJQnZp\nnu7rwX/Z/z12rjbgqkiCOA3IEWENk/gtJ+1sAwA2YtJpiVNlmqxjoREfdzWh\n9smt4Pj8Nql3ENKIF1yyOxoSWn7w89HTAa5Xq/K4KB+3XZKJ/J0f8KlBhM6j\n783s1Ycvb11MDaZ4XQaDK7YcvtgtrnPiKKW5itMS1RMsCYpXjJ2KwMtcMy6+\nl2c4S6qJFKM91mG/kymEzoASYsy2VHCWp+5jf/zrX5PXCsXv0ujgdFQSw+3N\nvZXk1e0/JCfgjpiI9uvOtLdv0/lGGLWMUqYJIV5wsoLQLYETKLWnQUwVj2rt\nyUu107n3W9+DLiaRUIfAVlwvw/tiwMmucD9VufsLRp0ysz/l4ry1d2Mx+WWd\nm9j2\r\n=PUos\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBl9YdbIuIFocSiokDJaVwSvKHkzPcyu/sYMQhQIGS+AiBJ9yXEyItJmncmiXDpDVrocN785eGaZbXW+NkpL19wpQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.b304a78b.0_1608062690031_0.076706150784839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-select","version":"0.21.0-canary.777c5fa4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.9244508bd.0","@material/floating-label":"=9.0.0-canary.9244508bd.0","@material/line-ripple":"=9.0.0-canary.9244508bd.0","@material/list":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-floating-label":"0.21.0-canary.777c5fa4.0","@material/mwc-icon":"0.21.0-canary.777c5fa4.0","@material/mwc-line-ripple":"0.21.0-canary.777c5fa4.0","@material/mwc-list":"0.21.0-canary.777c5fa4.0","@material/mwc-menu":"0.21.0-canary.777c5fa4.0","@material/mwc-notched-outline":"0.21.0-canary.777c5fa4.0","@material/select":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ha8ZtyDnw1XJFsXFRknzPFuIbsvaBbBROrnWCXO805JYbxEGXKPv0HICv2svOGjeOpta9jx0OD6J+v3EsnyjtA==","shasum":"5fc89a87303832446f61b958aaffd644c3b2d27e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.777c5fa4.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oInCRA9TVsSAnZWagAAF/UP/Av4S1A5fsDsVqWOra/S\nRYtg22T0rochu+worF+/Mdbbq/eqDFG8qdIv0/fbR4lzJj5bNzJBp+PHE+Ys\nKEyqvNJiSkEa7OoEHrRJN0/OlgLMcSRe0x0K/jTIOH5djZ1IQMOqrNlH1OWs\nn+/zgHbrs3EBqenT5V2thfjzG09B9qZcN/QKvfbKi0vwTN2u/H8SKNIF2WXR\nclrFdVf9fOgxuRZkK9OZuco1BbT0PeOy5itSxKwJKDhltA/z9DC95Nemjd0S\nyAi9l7KMld3ig55qLBLquGe4FH+6icvO3so8gLvoP8K9TtJMiaGze66EVqCH\nmjxWdmCYOidoEvCGK95gDgdhftfx80j+/gs184+STyc1SGIpPlrMOoLiRGPZ\nO07NWl1tI5Q2lYEgcrkFPpwtkpQ2kqaEJPuZwXalQaMoacxTTPZaApFONOsG\ny6i5q3IWlIsZP5v5TW20CqF8fkmFxA2eDdmUi+4be6z7Fl/puA7ukUTveQwZ\nrq7t8xdZ0bsB9rOg1HnYI9OQ2TYtNPn9votVdHXyOHHeaeUdHVTMZ9Ltwl+I\nQ9FFNfzVjhp4BU+esD3jQgQg9P2hf70EtqK8RMdLUYnK94nz7aFLlEHW0SNr\nMybJGyNlE9+zdw0SiRZSVZUzE6NMQ4hyATIrRKcptAyCGnO977CDAzELwrXw\nGQsV\r\n=tHfb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGT7qWXegd0gWNiXXwH3v6tYkvNPJYt6Nw+k82FrJFq9AiApoHzlSN57ibR7itFyT9b8lzGkHQmeNjheIsW6+dXiLw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.777c5fa4.0_1608155687058_0.7117561940293706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-select","version":"0.21.0-canary.635c7996.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/floating-label":"=9.0.0-canary.30fdfd06e.0","@material/line-ripple":"=9.0.0-canary.30fdfd06e.0","@material/list":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-floating-label":"0.21.0-canary.635c7996.0","@material/mwc-icon":"0.21.0-canary.635c7996.0","@material/mwc-line-ripple":"0.21.0-canary.635c7996.0","@material/mwc-list":"0.21.0-canary.635c7996.0","@material/mwc-menu":"0.21.0-canary.635c7996.0","@material/mwc-notched-outline":"0.21.0-canary.635c7996.0","@material/select":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2kmWP0ero+Ox9Ggwf9BrUMpmlQ1KKolE+24kCwzNKVNZ8KvcIPDvSHp1sfPLMSvb1MwLLDUk9BgE6WE9cWbJpg==","shasum":"58a5430850752666324d30218eaea230c2cd0414","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.635c7996.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+qiCRA9TVsSAnZWagAAIPsP/iiax+j72r2Kx2pe9W44\nBRm3KGGI0NusZfETOCV2NI8S+qDBC5iim2X51jRGcUXXbBND1FtiQyLE4uiZ\njP3XMj/GzbKKta/l/UoaYWQ/2SVj8+D7mleCFr3pJWhWrl43+5RoxqjGoa6i\nIHhPzjz7njQLVlws7iPNSsVPvdZ+/wy9ewz6yWrlI85P9cQX0jp26YEIf1nH\n0VMOVoNwdwWXDtQEEBWQUUWfBBB235rpYsn9tI8DToUTtJ/yNVCYc+X4YUWZ\ncqFachUzSotb73pj5tToz8vnVR/+vJwOGMhLrADxiHlAw0SwpF1oz3SEh7rO\n169Prdveg2TL5MIQRyBMb6434+cqcLLL+yo6OwwqnsASIRbprDS+CY49PJVD\n9NnWmdy7f0xCeClzq2VegGkUX2pJkXaSJly3x/NcZSwLgTjtl/n0dD4Bu+DQ\nzvtqmiFdpJ9GGuYPCjro2fRaAiqM3zQwEt0gs1YNUGxndTvS/D4FtnPj3kTd\nF38JVsBQsbohewb86wECYmeUbNH5QHYzKgZBb8zdOJt0ZgLfCB3pxxb641Ky\ndg5NMRiFZs2I+M0hqBZMN9/hl4MVhYFg7n0lOURx1mcPYbhkD6zrLQq7l96m\nhh6MWKt00EVbZs92wYxTReGLHt2vvjCY+CVog900Npek/QsTChmpvY88rfJE\ni8Nv\r\n=9OrQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEytZCUTZ6hxj48aJgIaZKi/zfMv66/yKhx+/FeoctpQIgAXVfKuAHAsaz1Z/6ZeStz1h8fDM3eFVpx+4c4qkal04="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.635c7996.0_1608247970028_0.8952818921458952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-select","version":"0.21.0-canary.20b0045f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/floating-label":"=9.0.0-canary.30fdfd06e.0","@material/line-ripple":"=9.0.0-canary.30fdfd06e.0","@material/list":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-floating-label":"0.21.0-canary.20b0045f.0","@material/mwc-icon":"0.21.0-canary.20b0045f.0","@material/mwc-line-ripple":"0.21.0-canary.20b0045f.0","@material/mwc-list":"0.21.0-canary.20b0045f.0","@material/mwc-menu":"0.21.0-canary.20b0045f.0","@material/mwc-notched-outline":"0.21.0-canary.20b0045f.0","@material/select":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7VFlI2QTOCrTU+vDUhHComOZDM1Z1QdHR41cLoBWTSV6R1eckgaI91JD2BjIlaXFfeNvwosq+OP5A0L17q+ECQ==","shasum":"6cbb35b36855694e971deff8635a5c58a6a6d980","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.20b0045f.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+6UCRA9TVsSAnZWagAAK+8QAJRYEYaDV+U7Z5xezXym\nPvSUYoGT4vTQjFlxecY89BQhEdF4+f/uOHRsStZkEXTBC5aCJD/LAUP17mYQ\nxcSWEOESqjCOmWDAQGe1ZX8j2vJqIL1gDjX+S4H6vfV3LGbYFzKM+DfcstMJ\nD8ibB7ON7mxAq84B6p+tlvN8ZIA6OgZCdjv1pXWwDV9lK1bO0lK+09+nBPDT\nfYd0upSfW6glYahn/i0goKjdOX/VT7z/12mmJ6eENGwinBbgpWQ/iUB49P9x\nWirCo9ymti6YKwaqEw/bNBh0vxdtw401TJL/sSc/bpday4qZQyiRrk5a35nw\nkUK6GTl7whHsOHjGToMkkHz9UWnEt50fggJmAjvAnG/YIGWEzp9ogMDFobWT\nZnwN9EzxXRkXtYygI/6RE0FcAbral0PE8yHyNs0bcGjHJP/O5S58gpQGfCmq\n5NioB5THfkTGMz6g0ggQEGRM2Wbs7tAALLHTQ4ar1YBX1nyC3gDwfDI6gpc5\nyv2PYO3ut9pCfbTu94WTbcS+/ayUl75Jt5Ee8yW8CYgPSFVv+bl2f9hdy+R1\nlZvqaSwyuEkC1ASdECK1viBnFtbynCCwWNAy2/X9jPVLcr4Zl8ShM0wF1mVr\nMu4aJcIKEyeyB5xEsHUQUQ4QEV7ZF52m0E3YXJRy3xe7pO0PD3WwNMeqDaPa\nYjhd\r\n=Pq0L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJpzzcvMUVA98mBhtGNATiDJlSwcJz8l2kfw/ri47X9AIgZQpCKqtubqVweMlbXIOu6RxLMhCkveSzwPPQrMubGAY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.20b0045f.0_1608248979978_0.7459293772812425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-select","version":"0.21.0-canary.41f77000.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/floating-label":"=9.0.0-canary.30fdfd06e.0","@material/line-ripple":"=9.0.0-canary.30fdfd06e.0","@material/list":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-floating-label":"0.21.0-canary.41f77000.0","@material/mwc-icon":"0.21.0-canary.41f77000.0","@material/mwc-line-ripple":"0.21.0-canary.41f77000.0","@material/mwc-list":"0.21.0-canary.41f77000.0","@material/mwc-menu":"0.21.0-canary.41f77000.0","@material/mwc-notched-outline":"0.21.0-canary.41f77000.0","@material/select":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-m2q1+TnxgesOKE3cWvVseNc48NLGNwKNwuMX6+pbIxhizGrXPWWxvN69s+cccF6FO/vnGAr1ynK7PJucoqOaYQ==","shasum":"8bf30f90adf9906541291f7ee4122e94ce2b0186","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.41f77000.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lzCRA9TVsSAnZWagAA4bAP/iVn3HbJUDNMgBLbXuTn\nNxUBB5L2bFSySiqDPlDQ0uYUkdij/9dNhEjq5sGskfGcROH42ELs1DcZ4uwg\nyTJsyp+TUOEH4VqCAKu3hIn7MiH8Rr45+NHUywD2C+e4GXxkOTgZJucPaCeh\nV9rIzhcj0wYoKUDZgMIUSe22sIJ8F8/2uDqFaCUqkTXW40/cImDYRN2JCZsm\n0B8dhc7YRx8NR9pdvDjxWYnGOK924Oz910ukUHsk5AJ2PZuMePUHY2zehm5V\nyw6y0eoEX897g/X1BKyPyxUEGVqeHoXtJFrgLyKAXyEQeCoVY9OrYquspq3s\n4vRca6ib36nK68WTSLzCjpXshMvMOTu6/kiyOz5iWqz6Piu7rWi1JTaSAs0h\n/kGjt83sfLHzRgO5iOamz/iKGmXnIjGzugEt019LYz4Hd6hxgxErdFWYc93e\nxQTYEPDVPtNViESrnPpUF8dlvLtCCLnqn+3hnCU5dGeXZEEhj2RzemVwQfr2\nA0+/KHXOxve27HedHlIHyItc3DQ9wuL4GpmEx2hyCLs2kwHUN5RzxhrOqvSF\nzoDFcr/8uF+6iEAmBb88MHCWs2qzPnN5NnuyeruGeRLElaWHbyakmp8GFUxI\nKh3oI49Hbnt7FymotfjrnzUhcndfsWsuHlQuycv6l+WK4slYZkwr8hkKA3y4\ntv75\r\n=0zZ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9foE6a1BXnNd2LssUv5JomqjLjZo2IrvNt+5gr2WQIAiBJ2lOcGvr2kFgHkcmKKhtZLZFY6TKF4J7Ya0kaEYBuGQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.41f77000.0_1608251762789_0.08626007925909196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-select","version":"0.21.0-canary.afe4079a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/floating-label":"=9.0.0-canary.30fdfd06e.0","@material/line-ripple":"=9.0.0-canary.30fdfd06e.0","@material/list":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-floating-label":"0.21.0-canary.afe4079a.0","@material/mwc-icon":"0.21.0-canary.afe4079a.0","@material/mwc-line-ripple":"0.21.0-canary.afe4079a.0","@material/mwc-list":"0.21.0-canary.afe4079a.0","@material/mwc-menu":"0.21.0-canary.afe4079a.0","@material/mwc-notched-outline":"0.21.0-canary.afe4079a.0","@material/select":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WnTCsm2vdJZNd6oJtWm1JcrGGl/NGFXqfefoclvEL0oxFWhGvg/n/wAX4vGED7v/WnoH4vmEzgkmPXeTx6rrWw==","shasum":"70e96f3d77e18dd01196f0c7d93b49b99158f7c5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.afe4079a.0.tgz","fileCount":13,"unpackedSize":201156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i+PCRA9TVsSAnZWagAAazwP/1zOUwGk/8Mb4Cti4SjV\nZ45l2k3/Nx12MJg2BCSvnTfNUe+PE05mZwhJCnAb20mC2/0AXClPtd07iPGg\nfbWq8TiEocgFydYmniOmoz8BbzmfFQPJKfKxSItRc+4fZ8XS1TSdW6XDd703\nPWoueLfj80vIDIvySTeDGMdS3QaeWhJsduxNLOhwk14xqRwX8jmxTKAFfG1F\nv2gNXbDhgw0W2MvDHgf6VvanmBrwufIc3LD8/dsD0DQueV2HlPAnc1LKCwQG\nZf2MhtLYTRxo13BdDZbmbMCoHb49T6rxt5ME4Zp16pRbolRsNTANfteDGnen\n8hrgmPSSeYIdmQ262gURVxRHXqvxQSkDl60DL7qOty1copyn3EoOOJw7TyTZ\nsO2HqLQkLh4C9EwtDpAzxeOhr7Y9uVv6D3WtLdbAG4d//5E1VwzU/4dVtk8T\ntwkMqVBxqfAyQ59rk0+qXyfMRFblIG4WdP5o35DP7m7TZ4OgmS/Oz8SdDeay\nxJ3KsktONTmIhmgFRWd4GXubsJnG84yS0k5Sgquxtj+s857Lv4AT33T6f3K8\n8x+LQtaVj92fwZUXAiYHzzddY1Rp1iJCBuCN9r4ZdSSPv59ysMwqeENg8TKZ\nDXFRXL8dbrD01oije2HNXz0kxncz8Dl3KAlzRUv+BB3GBoJxS4AdxGT87B0u\nxywm\r\n=M2VV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUowtkAertM0nxMUeUEclaiWctlVZS2prhXZ3qfjWFLAiEAvmCCJzYlgk8fF/lH2iqSCHqfDoMQ8Aq3NY1/G1sSNMg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.afe4079a.0_1608658830657_0.22215581812566843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-select","version":"0.21.0-canary.407ef8f9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.671d72d95.0","@material/floating-label":"=10.0.0-canary.671d72d95.0","@material/line-ripple":"=10.0.0-canary.671d72d95.0","@material/list":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-floating-label":"0.21.0-canary.407ef8f9.0","@material/mwc-icon":"0.21.0-canary.407ef8f9.0","@material/mwc-line-ripple":"0.21.0-canary.407ef8f9.0","@material/mwc-list":"0.21.0-canary.407ef8f9.0","@material/mwc-menu":"0.21.0-canary.407ef8f9.0","@material/mwc-notched-outline":"0.21.0-canary.407ef8f9.0","@material/select":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-verJ16ogj+s7P1Ky03E3wQdnjbKAHL6Fjbf04knu+/IPcWlYgtPrUJzvbK2reBj1/v8/O78CfXtm/0zlc+KQ4g==","shasum":"c047e2760eb6bf71d538a894d4641ebfcf9e64c4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.407ef8f9.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Qc7CRA9TVsSAnZWagAAz8oP/1R6tOgYYnj8/5hnJefT\np3tNx1bLnSv4TZL0pZUB0bhZTWBTQljcDd0Sgk+y9PljPjhx+2o2TZqocf08\nLseeVfSRMr0oZaSnXVcvwkOzj7423VAjGHyBSTk7c6uq2rUjqU2aPVIYOnv7\ntl253yPQLUDUgt2deXp0S9F/AyjgniWQY+eBXx7MyleK8ZLZSuF7lKZ611q+\nxu6JNAbGcs6HjcUldVKhhUo+B1RJLfhUQpdwdkF4/emYYOX+3fISO2WkMtyT\nyN9z5sSKnLHt4GMqcQ+lgPLCQ0AkNV0F/sjAiZvN6skopOao3IWaccRLyZF5\n1ifGGBjuTLUjN4i1pDDe8JAL3Bn28bHJ/2YOxSSgmoauva8emieSSOaQ8M/i\nsqfQBfoqvp1g54xpWCIIfIGgOT9GiqpbJfXI4o9u1zEEfDhCXOG0eGomEJdN\nPwNWYFzLvcNHftZPy7bsbGOLPWfyVszU0dHWnnUQYD8tsxqHOsAg1h73pDcl\narqkO0gowlWnSKrxLWL3g3oNYfccgwdwzxqjjZv9Je1ESPi3EZB7h4vQNTtb\nzW6MtURTANdDr6SHBNPeKGuh+5t+OG/aHSC05dnOGR2952TLPmFHQ+aOjtAH\nLoY4/a+AY1NnIIfDBJ0930xmf+aNx9o6GKsjUh5en2o9PTQnoeWLFbNwPlCY\n/OSw\r\n=J12Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkB0o4dc9AJTKXanxW/1Jb5Vg7B0YekDpUnnV3PoKkuQIhAN/+XgLaNMzn83g44Jnng9IjxfYhbD011MxZCOuY5IoU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.407ef8f9.0_1609369402606_0.5504833378130571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-select","version":"0.21.0-canary.2e26e137.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.365c69360.0","@material/floating-label":"=10.0.0-canary.365c69360.0","@material/line-ripple":"=10.0.0-canary.365c69360.0","@material/list":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-floating-label":"0.21.0-canary.2e26e137.0","@material/mwc-icon":"0.21.0-canary.2e26e137.0","@material/mwc-line-ripple":"0.21.0-canary.2e26e137.0","@material/mwc-list":"0.21.0-canary.2e26e137.0","@material/mwc-menu":"0.21.0-canary.2e26e137.0","@material/mwc-notched-outline":"0.21.0-canary.2e26e137.0","@material/select":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-E/npHlCbMbKF5/gs2qydJFXl0DueHgpcsfnm2H6dwoxkUfy0ruP76lBq4iqcsdjitN2wEqcZVpRfl3JhtFruAw==","shasum":"cf439600b51ad2b45ade3cd99a456239005d0fcb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.2e26e137.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTuCRA9TVsSAnZWagAAjnsP/A2Ws9uDfNtSs/IDgiYv\nf7ZTEjzyF5IOqC+oBNd4ezEnJk9qACl2uFi8so1qmdyNu5fwDKKsUcA2Zy4H\nyWNNvCh0cFNR/2SOsF2A2+kf7h81rE/0uI2l6XLbpBqf2BbSXI2S2OqAWK4k\ndoo3JDf5OSpsNOBUzbG59WvBPvwaynuhKh6YkYTmxHvyhW4GT3Me5iTNMgO+\nDdJGxiQyOTF7UB/IpcXorXkpMJ0s3WMFlz2WhS7LoCKK2FVsB3AkHtVB1NOf\ndhNNZHHr4yvGYZB/L1o4t+gdNhFV8tSt/a9xpYirD7fr0fCwOAnut5TktBqg\nLIzlIQrqEHptfW4E1Pwq8MkxdomhlLBcZTN+uCgQ+INSzx6r+1jeII4Cr4MM\nATVrLG5ha82lX8TUfSi0pdUxV2j2UKYCCHpPQGf8EdKl5xBAMALDQUv4UrgI\nOW0mOuSOwkruV8eE96AYQZZWl3B7NMONghiZxEtTJSBSGuCtB9lyoVF2+GFA\n3lzxvKgtUcq8ec62YBpSAPAEi2ZbokncxdsZXoxsznFQWvKAfujV1o+eKiEu\nNfqfZEW/11VDyPCJ39qz5yBlvNcEokt+Umm1NL5NZAuz6XZGZ8sEXhkv8+RB\nm1g1F3o0qPtlY/+DG9VaijjkZ+m5HPeqaxyhqBU7EpnAgO9prBLutKwnuY+V\n+j2a\r\n=S3Cy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwXdSFzshlzd8BEbiTt+9lB5aVp2bBDQprDr4CjkfP1AiAdo/lNtnje5QdILb8+bUtYcvib22eQTpKx41EaUxW+xg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.2e26e137.0_1609872622402_0.8672516261442786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-select","version":"0.21.0-canary.9009f6c1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.abdd10065.0","@material/floating-label":"=10.0.0-canary.abdd10065.0","@material/line-ripple":"=10.0.0-canary.abdd10065.0","@material/list":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-floating-label":"0.21.0-canary.9009f6c1.0","@material/mwc-icon":"0.21.0-canary.9009f6c1.0","@material/mwc-line-ripple":"0.21.0-canary.9009f6c1.0","@material/mwc-list":"0.21.0-canary.9009f6c1.0","@material/mwc-menu":"0.21.0-canary.9009f6c1.0","@material/mwc-notched-outline":"0.21.0-canary.9009f6c1.0","@material/select":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-OLgeBcq/FysAfJ5XUmFd6yhKQQbV/q5jhg4gBeTNVc5MRceuksEZo1Dr3n3TWdscmWx9lR7eMkf9xwM7DEKcAQ==","shasum":"65189fc1f4d0e9d36bd83b4944cd749ecd19884d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.9009f6c1.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LiYCRA9TVsSAnZWagAAeN4P/jMQJ+rQRbe/4dHn+MqC\nV2tFpiK9+M44vLhpxzmDAHjS1yto/95dK7BWppMn3dXU7XNBHBikISaQtjIF\nCTICvwN9pzFR4UnEhxY5frxpkbG8rQShMLpgFK/dzHFuegjiQs99q6m/n0rO\n4xFE7FmUVlCz2HRrugHJ01ld5ZIl3gFwPnFSBVE89MEqeeSFWN++9TLPc6+g\nGuNZ7i0mt9ta62bbRV2KB6h/8CQkxpNkcy5YMuuPz0tXBUMZliDpGz0EV0Ok\nYnCGO1wUnoeVmkqT2MfTuFps2ecCopQ4Zz0BHjQi1LM8kLUGLN8qQmEJewQm\n7r5Xg4rUa2TfCSCpIIqG+wAXPrCWLsfDuWDPrxhie/UU/qQ+0NAu28wt5MvW\n/t3l2ZWaYBODHAhkKTPEKK0IwbOFZ0ILVyw1dGh0MOiiG0mnAW1MDSQc/bpF\nRtEdWe/KNRQacuJ9hlsaVKobJn1Zr1ihHi/FeelFEue/pi0dYna8DJTiIlam\nc9+h//jpyDduJFJCArOvX4GHCcEPLl8/erEH+Z5jxMImv5jz4LGW+EHtWJMo\nhPIrR93a09jaqRoEyGN38YhIrloSjBoTnJa0U/o9EnYnWISFHiOpBV5f+Yax\nIDj1s5mEa/iA0nY2kiDdcbnkex7sj+34zqeKp9z9fYIdNUAbnkXirUWDFT++\nc5Yc\r\n=Lt8H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1P51Mt0ZgNPZp8UrM3VimIkHoZaMXwiacakPSNT3TPAiEA1Zx3wp33yebrkpi7uu834GjcmsbhLOI9afuv9D1eJ1A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.9009f6c1.0_1610135703558_0.8106850730028541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-select","version":"0.21.0-canary.ee99b646.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b8a1a58e4.0","@material/floating-label":"=10.0.0-canary.b8a1a58e4.0","@material/line-ripple":"=10.0.0-canary.b8a1a58e4.0","@material/list":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-floating-label":"0.21.0-canary.ee99b646.0","@material/mwc-icon":"0.21.0-canary.ee99b646.0","@material/mwc-line-ripple":"0.21.0-canary.ee99b646.0","@material/mwc-list":"0.21.0-canary.ee99b646.0","@material/mwc-menu":"0.21.0-canary.ee99b646.0","@material/mwc-notched-outline":"0.21.0-canary.ee99b646.0","@material/select":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Kjt5DtNXNR8EoQf5c5/fbQ/E9NazOiEdYIpyL2qVpon0+EBVvGr7hcVwslyVXMlVBUkpJlO1DD5rk/+DHNY/mA==","shasum":"d5d3a10a9ef48660d0b4c51e54f786091ebd6f2a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.ee99b646.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NqLCRA9TVsSAnZWagAAUFkP/0ubfSF9C43TZb29Ny2s\noONbburfkwCMTMRSNDk1n8MoiBM0QTuU4/+6v99iETPM6IDs9zber+gHope4\nEVgLFn9eJ+8pCwAhF8YwRMEifSH4bGMZUAL4iGCUj1hCagZummfX+EZ469AT\nUpj4RRUV1ieYwyrQqvazaHbVxvtXRslcseCnYv1X8/ZL5F0HD1m+ArLHBm1C\nP7a6oq6Be8HEp7mzigN51lkggXMTYuhPT7wRSLhkQht30ymfmkryceVVNXag\nhQtOtOCzcECzHJQfDgnpNFj0JbwLiPxOQxhveNeN7J2HEL5WBLrXUMNG508c\nnEzeB/+knKIUmsVChmKc7+HuBn5n8QW8pGM3GYB1fR7oi7DcOYGLwfEFL9tc\nOCnhGSbW8ypjJiPnm3OswoOj0x+miWmrkAPlQ1075mPDze1dTkMph04kNua1\ns7kLsSwQCCvm1TNWMTBGto2PASTXpB34guBoONAVqNSu3Qr/lYubU982/Y0V\nvxUzg02jXjlfzSWiAz1VxSfKXiLQpuU+ZniQqEQeiZO4A8rSRNAGJbvRR9b+\nO9KY/vv93NzeKoif4BovQkuonwfVbjJPRL3AWyGyrgHgAasSUTbDueAWfoOJ\nl+Wsb3SesOyswUhM/zkKhL2QSlQOIn9f6wJbmu26L8F78gpjoAHkLBMNYdYp\nrpNo\r\n=EHpt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBRxWfpHOWwfmFtAajuSkGtmmUYbniqIr9bBWMi0SsiAiEAqovsZMoiu7308RivAPFuu+lDrOjj/LCO9cFThGWSiGk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.ee99b646.0_1610406539076_0.5100114399654723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.740ed33b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/floating-label":"=10.0.0-canary.7584267ff.0","@material/line-ripple":"=10.0.0-canary.7584267ff.0","@material/list":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-floating-label":"0.21.0-canary.740ed33b.0","@material/mwc-icon":"0.21.0-canary.740ed33b.0","@material/mwc-line-ripple":"0.21.0-canary.740ed33b.0","@material/mwc-list":"0.21.0-canary.740ed33b.0","@material/mwc-menu":"0.21.0-canary.740ed33b.0","@material/mwc-notched-outline":"0.21.0-canary.740ed33b.0","@material/select":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZjA0bpX4buF0pZ+cKO8iDCF3T+c37zKE/4YKvv37WOoZ1VYRkOcE4vk5muu473kS6aXRGOy2xEHxI8mVigOguw==","shasum":"3a3420810792ef9b6eb31a5d135c5155da251560","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.740ed33b.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eTACRA9TVsSAnZWagAAeAsP+wZHKpRMxOe7EO7pZG1/\nAZOiGJcY40OhRGia0QwuKZ+7m77SeMlKq3QAydkcCiwy9IrYOEZlYqmgkTmr\nNDutOZwjvaJ/HOeilHMR/zPGW+pMqbTS7W1ZPqP32Ccul3iJF1AVeFQgnCBP\nxjpbAQ7gOVzb4EmMmFd3R+h/iKasn0PdU9l5hfflTVNvBILAaHCKukMU/gK8\nIl3+BDsedqHHlGe8qyN09qjNWkJrsIvj9W7rHLibYdtZkp9UhdyMVV3YV2iX\nXc73zCv0MUAka5wVLoWpXr/xcmkJlk5d/gM87sKo0Nlg6U/svk0pAOIsF9W6\nxrB/qiyh1g/rG9fsv/2zuD5u4qPC2yqSIVvMdZiqrlGEI2OkEjY/juGIh2ou\nnHVS8gxjiFkMZpCr+QDONTOr45KwEgZFCzMNAjPIUWdQY2QBqYNQG2ESPiWI\n4nH3omTIaofZTOy6VOByfARxmHUmexZrMROJCH6ukdad2yo65xkSkYvgeqw7\nMlLfPYYd+whcfCv1cVGaoc3cc/VN7XKDrxCr51U7jpZ/w+8GuFOOmhSZoxAq\ncJaULX0WSx/57GRUpOGzWKHHffR4+mJnCBPkdX9FJy8Vek4vUudK/XoDui1j\n0mjj6iaueK6X2P0g+OI3tmp0o1AUtTX1u75kUZQ97nZGZcpKkofyqvL4K7H7\nvj4f\r\n=quAF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg+xdgFPS0zeLV7mKGbF1x3nVaVnWtQFYDz0Y3UnG2GwIhAMRfOC7voXgGMnFiAttFoi96V6bTJ1QCseP1Evg48JB1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.740ed33b.0_1610474688426_0.607130413281848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-select","version":"0.21.0-canary.c5c541b1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/floating-label":"=10.0.0-canary.7584267ff.0","@material/line-ripple":"=10.0.0-canary.7584267ff.0","@material/list":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-floating-label":"0.21.0-canary.c5c541b1.0","@material/mwc-icon":"0.21.0-canary.c5c541b1.0","@material/mwc-line-ripple":"0.21.0-canary.c5c541b1.0","@material/mwc-list":"0.21.0-canary.c5c541b1.0","@material/mwc-menu":"0.21.0-canary.c5c541b1.0","@material/mwc-notched-outline":"0.21.0-canary.c5c541b1.0","@material/select":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ukD9ZMJZb8MQzrI4vo1RhPyuGiQTcNgqO+6hYesaxv5Mm74+jF1BcOvEB/GDw1nVV60vULGT5XJbQh8J61JFZA==","shasum":"d0671186ad960b5465f525e46a2e0992902f9290","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.c5c541b1.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e6DCRA9TVsSAnZWagAAn8EP/055ul/3J9fm1q0BOjVs\nHeDxwfS4KGbdkPKCYhAz6ZMBPQ1fGuTsBVdkcZE0JFpEUhH6sN/HIaoSgyFB\nDdCRU5nyVuB8oF8xPHcJa4eNd+IOmGQT+c8KeeMHLUNBkAJSuDJ8rM840XDT\nKgxTLfj10+zkkDhSt3JbGKkjdzTfOWCH8QygWp83hkFWvBqPH1FAeMo0S4Yy\njzPc9L2k18aMLyI7Ho6inznUw7F8DKpei9Ly95tTlSvGMITrqGuVm7/cagvy\nDH3N42/DqzZd2XDJtU3f3twma1ZMuc+azmRjelf8oFcpgpU0a8yVZ9wxud4L\nwiX50wVv73niRyzMwtQ6eWAr2SBpxoLNsjLAZ5jOp+Jpibrr+Pw1cPZsfc6q\ndSZSx0hBBCJPvyi4hS+c2Mj1ABqmrzKHzr62IPVV2gy/1VsKMjXQVeopviTJ\nCqaPH19Ti2z4fqSIrQdYwLElSjIXyTbq7fz/bw3joj3cQXAzsYV53eIoBfaE\nFmfezgZZLT0ataMdg2upQk7p6tOOtpFDdKx5dUsxJ57Qbts4EXFYTTzr05YC\nKkIb+9EbbnNT2YfCgzgLVxuWKUpipeId7VjZ2IRV3zgwNzW49W5ot6vE3FC9\nzb47FwAKTAkEvD2imfm5QFiR5pWJwGGwHYKzl+t3PnGptgJFlr/ingMYxjfU\n/Q/j\r\n=MjnW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCO/MB2Sm2eaTKJAu+OGtbGYuhUTMj3T6fWFWVIvZLpWwIhAMTrp82TXMEcPeh6+ZhxPezJD4bI+nGvoudCAK4YBeGU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.c5c541b1.0_1610477186770_0.197165190933982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-select","version":"0.21.0-canary.06fe9d90.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/floating-label":"=10.0.0-canary.7584267ff.0","@material/line-ripple":"=10.0.0-canary.7584267ff.0","@material/list":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-floating-label":"0.21.0-canary.06fe9d90.0","@material/mwc-icon":"0.21.0-canary.06fe9d90.0","@material/mwc-line-ripple":"0.21.0-canary.06fe9d90.0","@material/mwc-list":"0.21.0-canary.06fe9d90.0","@material/mwc-menu":"0.21.0-canary.06fe9d90.0","@material/mwc-notched-outline":"0.21.0-canary.06fe9d90.0","@material/select":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YL9Pdedu64V6q3CZ8tiq1TPyhUKlImgFPZrblrs5BS1XxukmJJwp3sfTB6Zaqvb/wOBsH1n6jIqgCBCQxrCIeg==","shasum":"7e5cab9df83134f5f421f734e121da1161b13443","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.06fe9d90.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gzSCRA9TVsSAnZWagAAHw0P+wW0vWKoAAQxBoU+tVt8\nNt0bAxp/ZybgAJh0xQFNSM6qJScr41VNufbtNe4x70LGXCaDUE0O6Ik34qci\nrEQQDVLULpAhey6haB9SeYTqHG6iEznnrYVNCp5e46gzE5mYxPZFFoqouzzw\nf28SMVq7SohWW8dRZiYCJ9IggHP1s3sPeDpsxuH7M1nSQEcUYqIaX+jY/HFO\nZD6v1cO49X9E3RcX/BxRLKOc1knCQU7NSYt7uhp00bRdATg0Pqg+dEZhxiBY\nb7gA4osg/ysLxyklaePOuF8/6CrDbSjR2LT64rXk5ATpe6FA0qvJj1hl1QeG\nPmjLUP1rAev7OgCdte5rPDZ7bEqgBBJUQclcP5gV+a2tEIfilVuwgPhH9oad\ns7GluISepJzYzt/8o97u6Z+SOsZm9Gy9LLtp2itp6sEhoYIr9ey9TzQAaq1A\n7192ftCc3F5/HvM9Kj9eJtuGk+GnN96LDN3yTsZKv/u2xCPW177T3QtvV406\np9CUnF6psjJeemEi40Qvi6SkFaZLAb3THsm2Re8iYQGzRRbCsVbs+A6vaQWA\nHCApIBZCAwe6vfsBYZt/TENL8d0PLG5YAOFl76QjqQjuGGrpo1WLp55/469n\nq4xOAnz3g/1nzEzlDpn/p092KZR0T8Kv4pIO9m2LRd5xyBgJpoVK8kuylFlF\n1btO\r\n=P126\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAeZGW02MTULoPn5hiD3t4YfFzDkAoWRSUb3nN9gVh0DAiAbq37+4Om4p84BR2V6ZJJNss2yVaoZHc5HZGVjbkAVkg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.06fe9d90.0_1610484945603_0.7441701549706168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-select","version":"0.21.0-canary.269eed01.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/floating-label":"=10.0.0-canary.7584267ff.0","@material/line-ripple":"=10.0.0-canary.7584267ff.0","@material/list":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-floating-label":"0.21.0-canary.269eed01.0","@material/mwc-icon":"0.21.0-canary.269eed01.0","@material/mwc-line-ripple":"0.21.0-canary.269eed01.0","@material/mwc-list":"0.21.0-canary.269eed01.0","@material/mwc-menu":"0.21.0-canary.269eed01.0","@material/mwc-notched-outline":"0.21.0-canary.269eed01.0","@material/select":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dcuG5Dz1AjFYA2OZcTgBcCP7B++t7oh2qC26LSgdOvRiH9ygbDyhrKwMmWn0hzvDTA7r8O2wZdox5Lp2KnM1Lg==","shasum":"f4363253afd9f7d8fe95b02ae9dd452ccacd2044","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.269eed01.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2ogCRA9TVsSAnZWagAAhPcP/2L67ZQ7uTECwhvYNopl\ngN8zPKu0OFvAA4XbYZgwCkK5+EMMQycI+Cza6qcxppCU7kH8kzLHJwBELFHc\n1H4NzKdQzT9Bo8pGE9OQQ8N8qwZtt9zh/HSRJiBEKV0p5VDGQjrIbwXKnq5q\n+Ph2wboONDzEkfEt3UGxgnI3LjxpTX9Weq5RIhXl8XkRIv1pT30nU4DY09wt\nFpjUQn5M6GWC3Qs5T6uhPPQEgZJ0co9kY1+keBFKrZEZivqevYzfBgDIMVzI\nO6rlHqq2q/kjWab6JP1vKUUtAJbsJ47V4IQNB+si+YrS4GEEcLX3FA4RKa6L\nGXyuu/PwfcQ3kgAsI8OWgABghnhsIPSO3CYkkIPVm+2NNhXgSwrevSKvHEEB\nvg2zQxcuQL1hueyd/DgL79ZeO+Vl7ogOSTszaGQ1iSAlrLzgfxJmWWIHgdfQ\n0pNH/VPbkHBaxYjUg/cAvmV3O7fYGPsqiN83S4k/1sh1ooZ1gJx/DO0OihWG\n4WQ/8sZ5NZAixJlxYMGaZ+rH0gsdL4liwMo685O+HYbg/usfAAMDEGy0g6HQ\nD1aGQPCR7oGgMQrvgRi1S2VtyeLUxxSfihIySf4r90IcKTMZ+NbXDgSzQ7Tr\nmn0y2Tuh23JSYwCeH+XseLSpKRopGqry+9Daiyl3VnGZvqFpWHpTeQoduv3L\nBTjX\r\n=jBVp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDb26sq5Jtu91qzP2axGhq31eN/J0Ha0FYZzUkTrtC2wwIgWPgMl31UuVRsMSVCs9BJYJ/XPaJPQ/dQnfCaTeQhDS4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.269eed01.0_1610574367614_0.3601545543367728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-select","version":"0.21.0-canary.8c075f35.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/floating-label":"=10.0.0-canary.7584267ff.0","@material/line-ripple":"=10.0.0-canary.7584267ff.0","@material/list":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-floating-label":"0.21.0-canary.8c075f35.0","@material/mwc-icon":"0.21.0-canary.8c075f35.0","@material/mwc-line-ripple":"0.21.0-canary.8c075f35.0","@material/mwc-list":"0.21.0-canary.8c075f35.0","@material/mwc-menu":"0.21.0-canary.8c075f35.0","@material/mwc-notched-outline":"0.21.0-canary.8c075f35.0","@material/select":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-itqYtbw2yTw3rC2rZTfqPngq0f9xyF6dlMQ8ad4PDAb5aGwMDbZpTMjONbipOaK7RLftHEeo7uOZyNOlbGQs8A==","shasum":"5b53ced1f4411b9cb84bd7e517949ffacac6d29f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.8c075f35.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/31aCRA9TVsSAnZWagAAhdgQAJELyv8ZjR9w2JPL8DVY\njxlcAR9pJY77/4/SzJfd8DdM8vSmQc3VULuHs4mOCWokJZL/koJfp7GLB4FY\nJigK6VuYvWGSmKJwWN8AwookWxnYoOZ5MYm5LRqvV+VS/CO+3JmrR0vGVWGG\nF8kzvI7giCq6kH20L0vVr0AGr1ESokWnP9uAZD/XAIPaNHT+BGJowwaRGx6F\nsw+kl2aVAQQkPzPilibwOaHpK7stu9RWYg7zkGrD7MqFpSHpWd/dFuiH+Yjo\n09LlaRg3gT5klwaP23IMIvDQRy3v38B2n3neyVOe52796HtjP/QTINGvkp2M\nXRhz5HUi15IdoNvdgoAb3QqQb5FPl2cq7M/rYaNRTov4Tnu9p2dEMPrY4leR\n5I4CSqYV77tbNsr76yni4ZRstT9NsQT/O9Jw8JRHK2haXRuoW1TVGZs5OBXm\nqpTL8cy5gUtGiY/Bvx1JMkRXbuF2ypqs+ClIqqPq/vF4pWs3Dttewxpqm4i0\nKBJP0w/6deHdfZ3vE5HHmH22G0bGdypCtTxO9Cv1+VQHg0m5PY+VqxHpjNAJ\n6NKnGGBSOt7lHdjmzCvkXaCD7qWviM2sphMfS5IQnGE6KwgHszbrIOcZwAqA\nFkC1O+YaYYSCRF5B6AWCICL7LBjF88tsxjh3wLt6W9CQwEULAgY8u+SBRkmO\nQL+B\r\n=ECnG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4I3F+JHCXdRGjF8cY5a81ojjkOqBNyK+0HbI/3nbjKAiEAlgiVlFXKjuYJ5m0VowlnM/wTLehteFSLnCD+djT54p8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.8c075f35.0_1610579289571_0.1063563985203213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.3cda381b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/floating-label":"=10.0.0-canary.7584267ff.0","@material/line-ripple":"=10.0.0-canary.7584267ff.0","@material/list":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-floating-label":"0.21.0-canary.3cda381b.0","@material/mwc-icon":"0.21.0-canary.3cda381b.0","@material/mwc-line-ripple":"0.21.0-canary.3cda381b.0","@material/mwc-list":"0.21.0-canary.3cda381b.0","@material/mwc-menu":"0.21.0-canary.3cda381b.0","@material/mwc-notched-outline":"0.21.0-canary.3cda381b.0","@material/select":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-QcXUw8WSiKHl9+U95YjvNpNkUuqYo1R18r0fx6Ma9jrOek/rksvJBOI8thNQxiuRY9YQjMVqA0aZm08rVwK6yw==","shasum":"13446b47e4de559c5eee1472bb0ef312203e6912","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.3cda381b.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4rBCRA9TVsSAnZWagAAddAP/2v5Pev9MEnvJANyErKA\nqoyKICD6UKQAkvABabLlWGrwn/pIbFoSKmlqgSFsJRMK+NN3HDdgzyqo/m2U\n+CjHBwQk3Tnod/6PPRdwg9UGI4vAHugpCQgEB5Zqyihi/DobQZAFmpTuQfOu\nSeW00uW+VWhF2YDT6tLKrlHpD6iIuVivq1QARofbkxMkzgqNPRXB4YtVsBo5\nykd2xq5PxNC1u3ca/K8KQYPePIwh/0Wa3f4zHQlRgqI9ekjmqQg2vM1J4DbS\nLP8lAGSE6FZ5njdyMbtGEA2B4G/lzNdFfBRuzZcGtHQr8F3nDfmSKKn2vzze\nNMLoFiRevsdcCoYLROKj4jVrmKnqQ95ggrNt5LYTmC4+L52f+5pNDWLNVkja\nCHtClR6+qbyNFNfEYB0CcYbj7ITp+NDTqH5f03XQXMKL9dkLCf3rzDp8V38k\n35zSznpeX7Dqmzu1oXGv+a16aHOstrmSMyZDb49oVGI/+DMqM7Z6zlO82a/w\nl5kDPfW5yYjt6iRnUiGCUXY8PQyBd/VIlVlg4VvtU6/l3IAx6tK7TDGf4Vp+\nlLUOAHAEgXIk+UuIOTeFa6Z1QKW/4jeBMXblyYxSFwPnntT+EzUTtgjAXdRA\nihOtVW9CBzHqocaVgRrQ11AABaUynrLANew/ym8ExuyPBWIN5sW6mR1EiTNX\nU7bI\r\n=jZNV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETWYTRzQ9fm2PjhM2a1EeT22hC2V1B56FepdVRFeAtaAiEA8RzVMXBhEWnc347o1hAjJ8ikXeoFnuHS7WvdfZEOqD4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.3cda381b.0_1610582720750_0.18900093114800876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-select","version":"0.21.0-canary.bc113605.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.772cc1068.0","@material/floating-label":"=10.0.0-canary.772cc1068.0","@material/line-ripple":"=10.0.0-canary.772cc1068.0","@material/list":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-floating-label":"0.21.0-canary.bc113605.0","@material/mwc-icon":"0.21.0-canary.bc113605.0","@material/mwc-line-ripple":"0.21.0-canary.bc113605.0","@material/mwc-list":"0.21.0-canary.bc113605.0","@material/mwc-menu":"0.21.0-canary.bc113605.0","@material/mwc-notched-outline":"0.21.0-canary.bc113605.0","@material/select":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-h1Ewsq0Y64eftWf7eRovkbcdkxgPaIZOt9P9CK/XhIRD4vS/c0A7208keZHzZgI2XYuJgGvuFacsqGL+GGDBFw==","shasum":"afde7e8f0f79a3c53379b887bce8c6ddce3f78b3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.bc113605.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5RYCRA9TVsSAnZWagAAFbUP/RFy3kZ9qyMr0a3WZ0l3\nhY8JINzT5bI8ygtWlJ1P9Cn4yeuIo1CEmjnZIh7W+ciizTOHRZPQAAlZpo5q\n8sqTr68yN52mq3nRHy8/3Gkkwq1SpioxvmvHb25TARROJ9Nt3W9FxG6CEANw\npPipvz6fQXIig+1JAQsTaPsCQcmjGHI08eH9tTCmsjY5/JOxORnt4wNQz7ox\n8NcOqUolte4IRdGTKqgP4fUUYeMEs7CxuPRxbdtoRAiGP1c/8uGoIWjdGSjt\n5kplV7lmyras632XLnyUmQo4pv1rqAGwn9weyl6PuByq3/UbpxLUxOGmQQXX\nswQndAbOhgGao6lzACBK3Mu7k4DdIgAlMsTqX9wa/0DxqQYl/4SgYL0vvQDb\n5OGTfzLBPLmwzz22bYExmOvoQDE3PX3YGv6+G05GAd8AUyZIwTgidFcrGNld\n94L5B8PuPokb1QvdVbRcPZykd9G4j1iMoiniH1qKW+TA0Kb2PFkBTsehfWlW\nedmDg4u9KN8aA22C1WQ2la83UyfxSzs7f8+KMl3/SnV8bhQOLLJVYjsLxofU\nKZvgxA08+kRIuHm3Yy1cs0m66X9lkYIZaEAEuCIYk859OOD4nCIWkPNdVqmb\nojf7uTpQn5w5fAp/2UNNV74irOnlaEdBPi/yZDoiB8qcjJzb4aQG0SllYzTq\n8kmg\r\n=WsFE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkW5ofNeDy46sZoW6CL5QhOutwZ2cYq7BVWZu7xmmxIQIhAPTCTyzpsbHi5Ce13lIh5mCuV1y9aDPgA5lg6qPqDddN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.bc113605.0_1610585175644_0.36292839264482946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-select","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.772cc1068.0","@material/floating-label":"=10.0.0-canary.772cc1068.0","@material/line-ripple":"=10.0.0-canary.772cc1068.0","@material/list":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-floating-label":"0.21.0-canary.0c1d6ff9.0","@material/mwc-icon":"0.21.0-canary.0c1d6ff9.0","@material/mwc-line-ripple":"0.21.0-canary.0c1d6ff9.0","@material/mwc-list":"0.21.0-canary.0c1d6ff9.0","@material/mwc-menu":"0.21.0-canary.0c1d6ff9.0","@material/mwc-notched-outline":"0.21.0-canary.0c1d6ff9.0","@material/select":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-CB9mjjtIFm9oFmrX223ohTtto3tIfXfvSdrrwbf0J9s+VfrVmKI7de+24YSm3mAxxRMtOkglyj7tcqjGDLGmoQ==","shasum":"30e8d2aaac4a2a2bdc226ca16e7d040d3fc8c5f8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfabCRA9TVsSAnZWagAA744P/jCv/+ZBe59OtM+a65tt\ng2+NJwtQ+l55ImeiE0RoyqOGpK3N5hJXv2GMjrQC+sR6C0RPi3lw45dqQywQ\n+07kUfOYMF8GfdP16lk9utLCUTGOn8mkK9WjnlNISsvxK+pUcLv1CxOG+FDc\nFwLXal4lgSiYYIAJEjrr87u7j/9KVwlQ+m64NLRNi+SLUUbIvYkxsYYf0FqK\nYsYt1y9ktG9VaRGazi4JcVY7XIOVdKUjWM6JC0SK/sqbKnS8+HIAOfsfe4Dq\n4mldPAxzcWfDrrxm+cX/qFS5IfjY+w2UsSdlhetihoycVfLe5jFPVUBBSKhS\nUufxvaDy9ctpFNsj2T5msvoP/cdM36RNcuJGQJJp+8nzo80gOrpYl40k6Ps3\nCTYx1dU0ZOF5qiyOk6RE0mRPMI2BJvzpNRSyYRtyIvjYo++MgCP3cfzrxA+j\n8ZujdJhzC8gYaQFFgB+XFKfawR0hFA2E/spJNj1dOJBEX5cMgp1OMe600Vyi\nvbdvfXzigdM7cRd07mbBuOR1rW/YydS1poQ0+8n0k+yBXzMN27c5NkWumwdd\nTyFeNCDTU5j+epTSvj+S+VMykfZYTrOQHuPU1FHKG0uPTC4WGzEOi21HU7Gw\nnq9bWWva+La0JNb4ZcpHrscM8E/c+7yaHdkrIZuBQhakyMRRriBY8qm3BZzu\nfsOS\r\n=SdxU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSvayp2Nyc16D9CypEzrnM6MPXlfSG30SjyIOJbh1RDwIgEDNos0bKYNnmFBAe0InwMdhqqLimklaI7OQJ7y7iGec="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.0c1d6ff9.0_1610741403116_0.06298085403026632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-select","version":"0.21.0-canary.b4332e00.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/floating-label":"=10.0.0-canary.c7c5da28f.0","@material/line-ripple":"=10.0.0-canary.c7c5da28f.0","@material/list":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-floating-label":"0.21.0-canary.b4332e00.0","@material/mwc-icon":"0.21.0-canary.b4332e00.0","@material/mwc-line-ripple":"0.21.0-canary.b4332e00.0","@material/mwc-list":"0.21.0-canary.b4332e00.0","@material/mwc-menu":"0.21.0-canary.b4332e00.0","@material/mwc-notched-outline":"0.21.0-canary.b4332e00.0","@material/select":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-p6A7mDm+wdyT67YmvxenOLGizlclfg9uh0rYcGAJmvBbksaMLs2L/g2+2NUMPy8fOOmW+WiK66BaaJhlUPqwtQ==","shasum":"1a110a914c63759e51a0be2d2d69620dfb6f00ce","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.b4332e00.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhJRCRA9TVsSAnZWagAAIqcQAIO2/HknVJC1zP64kC/q\nADSxSyvif3+0Msk5XpoyEYOdJhf2s9h3B3/sZVAZB7QUvtPW6mN0OAN+p2it\nmCOtTAKNiSClGbUwqbsqC+vbQXTs7CinNnWp0fRqvoqRLHIUNQxvvrKH72jW\nFcsmlmPhV1C2Bc/I2FjEpAfqM9Lrv3fCYxuS6wJzT7llzhvSk+450v5j85kq\nURv2zNIZlDwHR052f3j/PiCsZ6jNjKgPAQ5+nRwtNusJc4aFTbgaKv7o4wL5\nDxsCHtpyCv4nJQaGKBLyOkFIFAzCR9S1+NqYQNZsJJ9cR0NM8J3Oq0i8xhC0\nZll0JD/gEX/o5gO1+rqNUswKo6IbKRVW9KwiUuAKZsLfW8gU6FslS9hRfnIK\nqsKRsXLeUg5RvVf3GIBD7rSLxYLNbOj5M5u+uPmK4K4/ZaOr/CfwKfasCnx1\nEiOYnT4TGvxqe3vlyQul3mhbqT9hUEAE+KDTurx0RtUXUPsHodFAYx5kFFix\nggcFLpmH9Bp8wLKrv2K9NeHfOzeucSyoxsq0aqhw7BN6e2Ojk2QEgdkDn8i3\n1n928M00sUAwZFgJTXJdLucpPbM/M/qqUtwbw1afEdsWpjOqmSSd1qlo5vNY\nLfq0bzGmYq1iMiZ/vYIiZqInQg7HOTZGht7aG4RlUcyNvvQEiOeIo45Y4+E0\nLeQb\r\n=loe+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLgNzVCV4mOYSVFltTEoCdbScibNjZ+RuvZwXa7Kv7+AiEAwlJ92Txg8NmbZ5na+x3bjvGmvCtMoPFcM/BkaUwMV4U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.b4332e00.0_1610748496622_0.23510998826791418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-select","version":"0.21.0-canary.2899691d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/floating-label":"=10.0.0-canary.c7c5da28f.0","@material/line-ripple":"=10.0.0-canary.c7c5da28f.0","@material/list":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-floating-label":"0.21.0-canary.2899691d.0","@material/mwc-icon":"0.21.0-canary.2899691d.0","@material/mwc-line-ripple":"0.21.0-canary.2899691d.0","@material/mwc-list":"0.21.0-canary.2899691d.0","@material/mwc-menu":"0.21.0-canary.2899691d.0","@material/mwc-notched-outline":"0.21.0-canary.2899691d.0","@material/select":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-/pJ4GKDKX8yQDGVGfDa0YIxYlVe+e+FurbygfaK/P3OqGX4OXzoMudrAR842hv8b+v2QN4WjCohIGqA+GxjPiA==","shasum":"1c849ba386b507944e0733cd977a29fbb7a6eae2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.2899691d.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUyCRA9TVsSAnZWagAAHLkQAJZjJbYBag5ayngyLdso\nUTt2fLVvfXoJiGHLBaHlN/AzJKsjMmtlaKhFJZM8ep7lNzeW3j6DimyMkCZ2\nvPx2zp0CoJpVRmPOM7Lk4Fxt2KKUeBtgFQhfhlqdpR11+asaV9DMv4HMGg79\nK+ZbY+1SLs7tH00kDFT273L+K3ZCk6BlWy76BLmIJoDcQzDE4L93WYrcn+/+\n7I2TR7FDSFCzje/MbsIgrnTmOk+841wC/htBTGJXFHf3gv/IYUHYsZ0/G1fE\nVk64eN7TNhxDtOrZJSVsNC86n3/iT61/BaU4co/1AwHeFJWoxFE9DmLxJbc0\nfg/G9L+bobsLBEqAcJ4WaTDoNWs78P2ho7cvVmBKGI0MVkXxd/G7Exx3V8Rc\nB8CPoanBykm17tq6cmDY9L7x61g84xBuGWsq1F+tS0pYyFAtRt4DJ/wt1R5u\no80t+ORxHqxBVAlKRzKNohMXpRC3qvOBUI8XUUnhYvPj+W53my+zTfvK1ZsM\ndgKqiwLCmflbyjHz/UHjiCbdN+05LQv+mINM5igldLNVNBfUzCsjnap2RApA\n89OADXhnkb8+Czw9usqGEroTpkj8xMEKxe7g1TjL+5fVYUPtCt6Yqcwvz9VD\nzVjBQkxSEr65D3yBAUL/d0oK2q4loAfUps3zkyRqi9maLeEA3ZMCpnwbIvOC\n8oNC\r\n=fUzR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+8XgV2yUN+C8v4DXmuarPoTYLPCzcFLGMPVoUTDmkAAiEAxEp4nzkYnNplM6mgcePx3TWUng6lJc/sWI2dqrqR9ZQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.2899691d.0_1610761522192_0.8823857068690668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.fe73953b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/floating-label":"=10.0.0-canary.c7c5da28f.0","@material/line-ripple":"=10.0.0-canary.c7c5da28f.0","@material/list":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-floating-label":"0.21.0-canary.fe73953b.0","@material/mwc-icon":"0.21.0-canary.fe73953b.0","@material/mwc-line-ripple":"0.21.0-canary.fe73953b.0","@material/mwc-list":"0.21.0-canary.fe73953b.0","@material/mwc-menu":"0.21.0-canary.fe73953b.0","@material/mwc-notched-outline":"0.21.0-canary.fe73953b.0","@material/select":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-leL7YaCsbQYHFrtBJlU+yEokmorll2Qwm4plzjy6AMxCs4os1r2+2AvCyQeOAchlTAbpcvFIROvnz4j3IrxURg==","shasum":"16a359733ec42e7edabe0850f7e6ce66584295a2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.fe73953b.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzFiCRA9TVsSAnZWagAASrwP/R4PksCvNXAf43z+7WDg\nECLwsJ45LwkFL+Kx8dqdDu9fWoHXk1XpgfniZL2xvhb/d9l8VoYmivSeQPMk\nl71m9lYNoaRu3diC9r5KWaV8QtWtE2IW300Tyg18MDSzDfMEa0fDvWNK1L+N\ndaVx2JoTWiqX1AN1t3bwXYBYVXf9A7W6P7ae9Z5rYfvOJtubB0ChUAx1prwR\n4I0eGckGx5S6kCV+ERqfYI3g9cxYtgTaJoqqW7uvkvfXC0D4/FENpBbHKjEO\n9jTI1uVGqOxIPq0GMDk1KvsEpAKlOSF9R7+DUwi3OrfPkCD26+v7qksREp7h\nSubp7iWkjJhIgnPehKS6w28QZWzePb6yXbr6CwekMNpj1P+VVTbDNj02U/ZW\nvaBPWDiunD2kMhlUOZ98JeZWevjH75AESh4BAKfqUXxuR8Ghf3d5G3NRrsTb\nToVfxS8KxjxEvjvEjtM8VZ2GzWHxZnCJ9RLg0vH4/UsZTt4YhdsuYSeKxvJB\nxNF/471kn3aaSlqsmEiZbrIhEE19gjVJ3H9deFx+HgRuXydOnvVYx3nkBcq+\n6pjNduvXUuLVcBm0Uel77axsVn90pEU4oX15tnEnqsZ7f8OeplzrWI+5MuIp\nhyNpjF4fLlKot+bbw4wv5MBU4CiBVzBdlQ3AHpIK2IJsW+FoWaBjEls6JzaY\n3JGx\r\n=VgDP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvgAKGfYBvB97NgtMvwnkRiCIv/RE80JwDza1UW/XeWAiAYGI/yrTKmR0R5BQT1gECrqS4axeuqO3FI0JyKAgjSlQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.fe73953b.0_1611084129914_0.5551359280317507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-select","version":"0.21.0-canary.d3a16455.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/floating-label":"=10.0.0-canary.c7c5da28f.0","@material/line-ripple":"=10.0.0-canary.c7c5da28f.0","@material/list":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-floating-label":"0.21.0-canary.d3a16455.0","@material/mwc-icon":"0.21.0-canary.d3a16455.0","@material/mwc-line-ripple":"0.21.0-canary.d3a16455.0","@material/mwc-list":"0.21.0-canary.d3a16455.0","@material/mwc-menu":"0.21.0-canary.d3a16455.0","@material/mwc-notched-outline":"0.21.0-canary.d3a16455.0","@material/select":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-WYONcI+8NEFBd0561FEezPzDJXldKhdtoUypk4/FoJxMQi9IkhFlt1tWOChliEnZXLxPL5lFjqXppGu+wQTkHw==","shasum":"999b92fccbfdbb6b2d9808791c733c71a7a33700","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.d3a16455.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzigCRA9TVsSAnZWagAAYBMQAIJCA7sqo8PEfAjVALKg\nvJ3OXoTTOruLRLNgddNWpdASo9QngIiNAknlS7/JxZ3vwa+KHVgSx5qiKI2g\ndkAxdKZKGJIG14RXvMDb1N3bNK0JmKvaZouUc4q3RDn5ksxk0bToyN6AIJAz\nzDwOLO/F2H2cKM+uHOXWlGc7KHmVxHlahsuKrHse07QUhZDtZBuitgNmGqPA\nBNQRRwJljuZW7bfi8yeg04Fef030bD+sdwoW+kYnzGlsljhpruZbmsiY/kdS\nohV16t5j84BoP02tGfAsL7Oc2y/9GZDnz3EFKm622v2/EImzuM04YKF0jBbL\nJc9YrVuCJxwLIcxG5yDUXDmFBKBaI1kdCer4LA4vUPeV2UFb7wbxMrEL/gMb\nQVTfjN5IrbF9ngN1KHz31RspBEs9P2eisEs8yThUiymQYPp0Ip/3JyW4G7cH\nPtlE5prRuv1TlWIW2eBEB3r2XqncrO56SrTpsqZ9zSHW7oqxjaZAMyf5SleH\nHvGfcFIljC9cLuKM5lPHgSAj5u9x1M1t/AQ7hSAsjHDNrBEyITANm7YG7IVe\nDHlJE7FxnYqK/ifCYK0T5sVt1kNzqIxsVnEZR8XcnPm0JdrS4BqH1RCpbXOM\nYKOrI+5Qv/gDsRWfuVQmajKzVbOhaPXxwRhMMQHbjjdvv3QO7YH6L3PvvK4D\najM4\r\n=ljLA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFP/NXMXjjlX2SNViWVXJ55XKD6h9A20uMUccEB6WzgwIhAOFQ43ROV8F0jUE6VXBJEZbnSXy/G1KElJVPl8dgHIi3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.d3a16455.0_1611085983882_0.8344536676413481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-select","version":"0.21.0-canary.597ca1b6.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b2faa116a.0","@material/floating-label":"=10.0.0-canary.b2faa116a.0","@material/line-ripple":"=10.0.0-canary.b2faa116a.0","@material/list":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-floating-label":"0.21.0-canary.597ca1b6.0","@material/mwc-icon":"0.21.0-canary.597ca1b6.0","@material/mwc-line-ripple":"0.21.0-canary.597ca1b6.0","@material/mwc-list":"0.21.0-canary.597ca1b6.0","@material/mwc-menu":"0.21.0-canary.597ca1b6.0","@material/mwc-notched-outline":"0.21.0-canary.597ca1b6.0","@material/select":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-/ZezLV7lcy4iPOK05hTJx5YPPSEhuo3LZkUHYv+OMafGQhj7YYov5EY+gz0wYb84y3DkSz0bbBfPPW/lCTLXug==","shasum":"885bf8db54bc7aae8a143eefd722b9bb1fef52b3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.597ca1b6.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4DBCRA9TVsSAnZWagAAW9YP+wYRvsO1bEZSvPuY1QtR\nU09eDdSnAaUxgoymtHxgvuv3H4VGuLBHXJPrZHWyfi+w4x/mV770maWiV1ZT\nDmP2LEvHJn6PuZjo9XsYP85XJSwIG8xEWyzmrTndBv+mDcS5QqIJcaTK9KeP\nuFjHRKeu9nj05y5OAZZEbh2Afq7zQFX1Ef3jLjB31PvHgimqteWFeodVTnlP\nwpkeXdJPz80O44mqZtpRIjxih2CtqrEJ93ObJwr5fa/+zy+n18DUlLKTbdIk\nnjypmRsGwFEFAQUD9eiKqDc+Eejig4yWd5wf6P+VGDy4gq71Jg9epargnMos\nAF/d/F8bhmO58Ky6D7M01/ZEn9SYkorm5WEluJ7XmU4ncpUmaou6LMIyXkat\n7bg/OPbo/2vVb0WmWwQc/YT7q1Xzn5B4nalS02OGdvTUGDjASCf7o3V0vxXq\ntNFvrB5hdzh6RhJ4ulsb6efzDmPq70al4fseU0BK61bMLCtVPBk8ljp3R5Yg\n6mlcJ95DYTyzja3t3N78WunuJ6aqXXjkHAKa697Ub7I3yfFmPcwPMSu/vjer\n+Xk20LElbkFUHGJ/m7m7EqYZcN5zU+9Evpk91KiE9btjzjFUTH0EXxfAqdpY\nH4IlkQJ0seGaylx+xEE9QGqidIJoNvLbeGYMq/jG+hU956Wb3RM8VyEKqvXF\niFRI\r\n=kc1w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAojqTY1y788T8rpijryTh0o11LrwygRuMWaa3fX8XRAIhAMTdjFL+yUmyDhHLL0JgNd40lUlZWhIW1UCOCaDFhhSt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.597ca1b6.0_1611104448656_0.22474958388780464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-select","version":"0.21.0-canary.3c195efe.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b2faa116a.0","@material/floating-label":"=10.0.0-canary.b2faa116a.0","@material/line-ripple":"=10.0.0-canary.b2faa116a.0","@material/list":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-floating-label":"0.21.0-canary.3c195efe.0","@material/mwc-icon":"0.21.0-canary.3c195efe.0","@material/mwc-line-ripple":"0.21.0-canary.3c195efe.0","@material/mwc-list":"0.21.0-canary.3c195efe.0","@material/mwc-menu":"0.21.0-canary.3c195efe.0","@material/mwc-notched-outline":"0.21.0-canary.3c195efe.0","@material/select":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-1NRbjs496RZ/4ss3QhoMq5XhpSjhQRa6nUzA1S8WeQuH9lYo3NXNJhFRpn4h+vycCkidU/RfWH4B8WZefFyrSA==","shasum":"553758f67235995791ebf1483bda9aa0730ccb7b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.3c195efe.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB48pCRA9TVsSAnZWagAAb/UP/022XRcCi4nhqrE12w2m\n5yWclohQv68qgwTYzV3JoMDnm0xtfvihCRmPWnIj1UMhSvyQ1yWHrSm/NYnw\ny17hwxExSiHQLF345G1EVpScZ2D5ZWnI8RynhBhGk4Jsa0YF4MPTvLuEimXS\nDR6JE/L0dejrzG37tB0+ZhpQtZjI3I1lrPWvl8cCPHBTyL/5wreG0r/shM87\nLo3LJeBlGWUASou7IhuEQXGL1AEa6q6XeMKFtsLU9dQtryPqciUEDOgiXHHg\nql7R+HjeiEOAzeXrhO2wkK1YSbOKSIof4xASuo76k91A7SNUvYt65uuXYs4r\n7RI3GSE1fTtzI76F0eynBxeMo/ZUblDtsAuNxr4iy7zy5xjSgVrS1CXSLQH9\nDYjdeGcaAMGghkhfdQTCetCNXsktmv2D/c0Aij/wo79gXdgZy6h4mL252Kho\nHWa0bFmHe6ovhCjJHRc4iO12WeWuR9sk5m/HcN6ojdmZ0GVaBPN3OfqyyUDv\nzS36g1j8MZoSB5keCsVkXKhTnfZjUOPniDikFAp9yCpNZs+yLUZJHQX3GDDo\nZevlLCeTTOmnvlBmzL4bIm05RN0FshuU9KldjoRavlIN5yFQcHtq+BzzalQJ\nC0OcPE3SjpKFi9Y/lK/l5qLAdlyOuVr0604A0PLIBL34AVDR1oPVL5ZtY5+l\nk6RV\r\n=SD9R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyq8kc0WEOlYouFKgJKjLgdpzLz42/deHbS7Hr9iV7SAiApFAKcYvX++VfUv/hBpRUO49EQ8sVyHYvCrzedIAtA8A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.3c195efe.0_1611108137531_0.4343600514037549"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-select","version":"0.21.0-canary.f7b8755f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.0c95c9f7b.0","@material/floating-label":"=10.0.0-canary.0c95c9f7b.0","@material/line-ripple":"=10.0.0-canary.0c95c9f7b.0","@material/list":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-floating-label":"0.21.0-canary.f7b8755f.0","@material/mwc-icon":"0.21.0-canary.f7b8755f.0","@material/mwc-line-ripple":"0.21.0-canary.f7b8755f.0","@material/mwc-list":"0.21.0-canary.f7b8755f.0","@material/mwc-menu":"0.21.0-canary.f7b8755f.0","@material/mwc-notched-outline":"0.21.0-canary.f7b8755f.0","@material/select":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xSfn31UdwiKOoNGAaUUbz7HLF3568sFLvbdi1C4/4QUknn3MoZ3CPdS9L3OCfKTnLAyzyObDcjk4qOzdePu8Hw==","shasum":"044c0777291485de137eea543c992b6087cf00f0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.f7b8755f.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJTFCRA9TVsSAnZWagAAP1YP/iaE/BFKKF6RzSlZ3pMc\nTneIOGC3YzeF5XiThyynlNIbmXTJ85p+Zx2iFhvMm2xHyZ/LLeutggqbKUrx\nAVu672N9h9zZ9r+YGGhnxbE80W32ka77olYYjksLiHedrbFH9U5c0cPgWH3f\nq+rj1sN34J+Npx/CfNSCzXxC6bqQWuLrQM6Dxn5vpjgDAIi+t9cGrngDUwQ/\nsVj3tWfXr8PnXR24ZRTf9qo5CLQNg9Y6HE262lYw3SpQbh3/cjJ6+wutzSIA\njW2cDPkGHS6ESUqsdn6bKIFuGQaOTWVnEVTrPkWkF2UBgVSF2x6XiR288gLg\np0skbokXcTMWAvUgVl6ooxHOtSjMVn4jiQpqAED2MqU+9oxVqoLtqf8NMHon\n9LmqGMFgl0DJAeFBesQhguNvbKhHiI++/t6ZDrPPcMKU0l29l4951EOqmky9\n2NCwyplCIfMdGIV7jixC2kxs0pwRqzOpTcgzSLvG/m7fQePbryPr/6EapfWG\nfXpXzrFcxiCNIVSuZTyJ5+k26OVjhADybbHbUx6C1Z3K2HyKmZtrDbTJ5IIN\n/A6vzLpsahCb6KzLU/aIKs4lLbk2Im2TkhVOOSweuEF8hvz4Wst2ItkzGocd\npFwJF7kOHWf9KcvYEEN4yHGuyGXpUgZY2MNrxHt1CwvaTGaLpA89rzYo29FD\nhriP\r\n=jNTM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9hKXtZm5MhUTmreqEqmT4+PgZ3g1v24Oe37XH8hmmagIgDFDkx16rm+XfNFntWrKeEXU8K4pCw/Al12CSSYaUIGI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.f7b8755f.0_1611175109295_0.919549990636803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-select","version":"0.21.0-canary.f60de7df.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.2ed2d829b.0","@material/floating-label":"=10.0.0-canary.2ed2d829b.0","@material/line-ripple":"=10.0.0-canary.2ed2d829b.0","@material/list":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-floating-label":"0.21.0-canary.f60de7df.0","@material/mwc-icon":"0.21.0-canary.f60de7df.0","@material/mwc-line-ripple":"0.21.0-canary.f60de7df.0","@material/mwc-list":"0.21.0-canary.f60de7df.0","@material/mwc-menu":"0.21.0-canary.f60de7df.0","@material/mwc-notched-outline":"0.21.0-canary.f60de7df.0","@material/select":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AEbS/aie28K18wF+enMxfjReh+37m2CRWBLZDHGd7iUAGsFylW/juoz8GcfvhbpaGiGQQShZQEPAtnvb0PF7fA==","shasum":"e5a126349a7057c31867fc6ae815b0da1d78d114","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.f60de7df.0.tgz","fileCount":13,"unpackedSize":201162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL65CRA9TVsSAnZWagAAa5sP/RdI7/N4U7ovYXfyMDfj\nZPliayhKSmWdclq5OZkDQnq0ftRu5OfYck5FMOBx1QSCuvg3Hli3CnbIVX0a\nryO9K7A95Qfd4VIP63/pamEADE/gyC/3Me31gbT5HgSCMsEPvfVjL2rV5QpA\ndm+IrKn5YZSYBE16K3y6bJNSC/KbL8M6rnsaXMZ4fFDKA4Fwg3jsAyb3qZIV\n9hf65UkhykDCoYeRGyBt6uukuZbs/GLvsGl/9tBVe3m2pLxNxaCyYVCaEWzF\nS5anJ1bX6U+I20NLaoaVmxMgaH3xkvOHZtlvcVoQHenT9CFsq2dTI1ALeA7m\nipTZ87F82n4xwm30N0MuuyQ4vU9ZhebO7WOVb5Hx6Iw9sQExU6wjOuS7hH0t\nD2xMccHWTa4PysnVh0I2dfswR84oTQ4CoRT1Kq9DBcJVL7DQiqbcJ2hgW0G3\nwRrsODZFEFQ8PMKcXJ6mL6G3YnmKL4kOK4tSvhDiADKsmxz8u84QS4V5k/Q5\nUb4JNkKMoOhZuZtIe64JRfcAHeevgph9N0peGBO1lFgCYjsZnJvyz5ggNj5D\n8qsRLWHlzWMbUTCSffMJPiKYfvXBVwpwSUVE6m4vTHdWIv+htiMLflD9soML\nQ6eMxdeAMFEO8C38Kb8mh16yJRMsRQTXk3v4yZ+mmpfKJNbd5KVBk5/WShkb\nRee+\r\n=AH7x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDP9IaAvelV+eLzSRCP141cal6XUWer3IyKS1bezU9VywIhAOc/VTeTQSRxaMLHJ0IBKn5sE2qZW/Jz0cvMrNc2j+h4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.f60de7df.0_1611185849226_0.7554030180303963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-select","version":"0.21.0-canary.664a2927.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.2ed2d829b.0","@material/floating-label":"=10.0.0-canary.2ed2d829b.0","@material/line-ripple":"=10.0.0-canary.2ed2d829b.0","@material/list":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-floating-label":"0.21.0-canary.664a2927.0","@material/mwc-icon":"0.21.0-canary.664a2927.0","@material/mwc-line-ripple":"0.21.0-canary.664a2927.0","@material/mwc-list":"0.21.0-canary.664a2927.0","@material/mwc-menu":"0.21.0-canary.664a2927.0","@material/mwc-notched-outline":"0.21.0-canary.664a2927.0","@material/select":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NAjehNm19w4/QhYKU7fY/mGBI7W4+Y3ilywhgeE39GrLh7qJyUBixD9qwJdCDoiOj0vwnusWvNFM9hOF/jx3sg==","shasum":"46884309e05e499594d47492ace5e6819766340a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.664a2927.0.tgz","fileCount":13,"unpackedSize":202071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdO4CRA9TVsSAnZWagAAA4UP/2pGPXQjcyl3eVU/cmQc\nuqmuq7ECGEl9MeJ0gBw4qZRz+eci9kjg9CUj2pCa7FSdZW8dHMVz/4YX4ZYu\n3z//4YVCykTpUDCNNhZTi1NtNwbM63CIRhZNYQm4qMC5X8TRuRpIM4kb8lU2\nh+961XN21NfkLJKrVJWs1b3Fhjg3xFUElSUlwVwoWd2Uu7IbkjfEdENJSIql\nK7ifQ9ld411iBcKHtjymzCixx5qOo5mzZogRKn8RpfexzmGe/tXhSyQ1mjmD\nY6McxrTmB2qABNL3GxzG/g7rB+8AwMEM3+mvIQvrqwauIW1uTdg71bRL6pAm\n/d9jQnVuwE1z0T2rtK9zM599dYQpX83SRYMCGn9XFkVx9ckTmIKlFtOUXr15\nYEPRl77daoiUkPLHTgbQMj6oE7/2a5MWt2zUpZdWT5BZXFXDeCWHnVJ/PGc2\n4pFRj+CJmDWKYUf4J3qKY7MTZgqDlUsBymTy1YhmmeJSEqMmdkAY9FQYo9Vc\nYufiHxqUwJJDgeN+CxXRaOTrV1pNzOD2BG8Z6ACZcffxUfboXh41XnVc5ZAa\ngYueyCblOSSS4NMHmzqyDLAE2EZ8QYIEvWAoxwdLkR6yTTJqGOWxEP40t5Wq\nwuxMIvNBwyqwlV/zgbyrhvvakD2WK7K5nW7A0ma3mprraEqOLruwSw9QsxG+\nlyPu\r\n=odMi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCRqNcvzSmq+N6hM/mkOf2/MJlL4gxPlWYARM4cKFHoAiA/Lx2q5EBnC7wvHrjopBivF5D9KOnOTasXdZPRgabjwQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.664a2927.0_1611256760195_0.3658455138245853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-select","version":"0.21.0-canary.a6d312e5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.fd61b0476.0","@material/floating-label":"=10.0.0-canary.fd61b0476.0","@material/line-ripple":"=10.0.0-canary.fd61b0476.0","@material/list":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-floating-label":"0.21.0-canary.a6d312e5.0","@material/mwc-icon":"0.21.0-canary.a6d312e5.0","@material/mwc-line-ripple":"0.21.0-canary.a6d312e5.0","@material/mwc-list":"0.21.0-canary.a6d312e5.0","@material/mwc-menu":"0.21.0-canary.a6d312e5.0","@material/mwc-notched-outline":"0.21.0-canary.a6d312e5.0","@material/select":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-uVhnUFxFwy359XSLh7lCeWABz/SNffOKn1hhuzRVAolvjIdElyu30tIgkS05/j1EHNHL4Wf+qAAjRkp2+DPkAg==","shasum":"0e95823be73be96e9bc4353aef435a41b7704e71","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.a6d312e5.0.tgz","fileCount":13,"unpackedSize":202071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfagCRA9TVsSAnZWagAAstkQAKD1D5lje+h6pjWqWibx\nMnGwtkKAnh763whVKR3YkqGWRguFQbilL+5wvXz3KxdJscsiD73KxnW6Jp7M\nCZ/+Am1kHMffNyXvvKQXel2rqakAQP2UShx/WEeo/O7oOUlX82S6gGrPWbFg\nxawAdyRmchNe+PXRv+b4XKq64jzoiR+nShBMlOeGA02bTXcQFSxCVmNUYOeg\niUN0NYGxTas4R5oEtulrK+coMy2bJtQ8fH9xNEMEat3rK9bHY1VHgOfQ2ty8\nDH/6OaRQb6EpWq8l63kt0okDtOtXL0RwG2frHidqrZWv3XVzC9B22oHgSWr6\nz85HQtNGVZWKbPGiJDOCjkm/p1gt8GJqWW6JQr276/j2DJraKnbrhx/CLny4\nfHvMG+9MgV0r3AhNywgqcELUNj5FToy1c8hRqx7GDcotlQ45x69Zq/Ctszon\nnKwoowZ2J/jeznmJXA55hzvGPFpZWvCVs54a+5ALtQ4AyzYhS3M78mHZQhOA\n+UI6RUX7A0qYazabYSDLL5PgDbr5mZPmk3NaLYRYQ6D8+6/HqopfF0bjqKgy\nSUsSRs7S9uipmM5pJLNufrHArzhmCYxdr8JH8XjaGDaQzK+k4vOHyzprt7T/\nLgAtRAUP6W3Bw2wreS2642ir3cLeVl267h6kY8WdMSqkGhVhT6bptxXipusv\nPOQX\r\n=MHOc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDw5oAQOMy+p1kgJrVR/h2W0IDzi1HoLr69++FRzXlmSAiAIJkP/P38jQL427ccaY8EaUcNtsPq6dxZm3gbKqPppew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.a6d312e5.0_1611265696531_0.2045985196475375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-select","version":"0.21.0-canary.027365eb.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/floating-label":"=10.0.0-canary.07deaec27.0","@material/line-ripple":"=10.0.0-canary.07deaec27.0","@material/list":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-floating-label":"0.21.0-canary.027365eb.0","@material/mwc-icon":"0.21.0-canary.027365eb.0","@material/mwc-line-ripple":"0.21.0-canary.027365eb.0","@material/mwc-list":"0.21.0-canary.027365eb.0","@material/mwc-menu":"0.21.0-canary.027365eb.0","@material/mwc-notched-outline":"0.21.0-canary.027365eb.0","@material/select":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Nx8udJtWXvfBrbm+QlowshR+MuX7KrnGlN6ayJyRLy4wQexksCbBO9+zsnUjYMCfpdUGCcg7a2TKj1aqINSpVw==","shasum":"f52aceb338e2d82a24ddd0579b62dd7f00dd1d44","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.027365eb.0.tgz","fileCount":13,"unpackedSize":202071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz7BCRA9TVsSAnZWagAAwpAP/RLskPvIlL3/BtUla/mL\nfY04DXRyCsa/qBLBeHWn/B+TExviQ7oED0aqqElfjKOqudcR1HKTVyesdNr0\nq6grTUNFyXFU3QX2yJ7HikkQzX89YPLD9KI8zfNFfio5RnQc6XHMIHMymlZA\nP2bIxfv4HKrOJTbnrP1B+TrJxX3G9VC8mUTW4tD3bm0cfDScCLJ1xSiAh54z\nFDfbzjvTpxJgtq/UJKzqYxvXs1dINZCVIu7BR8QMHwV4e0KmBzrM8Ny6Dxb/\nfMjp8MAFutVIn1dkeCX3s4Sa0bpoJp41/0YJwHZbVBv/wqc3YABq9+h8JR//\nJ8Ku3G9aHGnaAmcfgoB3oEA6dYZwWmXXmjmUb2IUwRhqmhHM/M+Xf+A9OYfV\nqal2s+s9HpY6mGCGlBUz9Chf8KRFuVoC5VuLsloNVE9LniMqJ5rsSRo1kHcd\na81+1e7QIJVWTlyfCx9wkpmns2V9N5nF+byE0yRuSifZ7TizPb+VJEIb6Rc2\nEElx7jdckykLSRGHCpXqinOq5mWWbLgdEx5rgNJGMV5M5p3oU4/CX0+8bjX2\nY2MwdxE29r+RchlOebgwh97LRdqZ0geFh/pr3p2RRl0eqgyRZYwPGho7prc0\nPZ3Uooy2smaAt6orKauoFTuFGnQI3bLT9VbzWHeZWzw+XrirhA3yM7svrVXN\nqYsJ\r\n=g+S5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDIXmD5ItE9FAI1U2yJqCI3O0icvM1cpwzLiel2oQvunAiEAydy8x1NdXAk4fzXjI6TNg/rvBOm0GS3QOcXPr/omkUM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.027365eb.0_1611349697378_0.9470160390284115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-select","version":"0.21.0-canary.7e72b66d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/floating-label":"=10.0.0-canary.07deaec27.0","@material/line-ripple":"=10.0.0-canary.07deaec27.0","@material/list":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-floating-label":"0.21.0-canary.7e72b66d.0","@material/mwc-icon":"0.21.0-canary.7e72b66d.0","@material/mwc-line-ripple":"0.21.0-canary.7e72b66d.0","@material/mwc-list":"0.21.0-canary.7e72b66d.0","@material/mwc-menu":"0.21.0-canary.7e72b66d.0","@material/mwc-notched-outline":"0.21.0-canary.7e72b66d.0","@material/select":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/lf7F9tTQ4I3dDImkMXImftvthIfMHjzHUnqXRGbpWq+uBAD1WkfTajfq92w2+Uh0XQeuUn+cHuNIj+6C0Gemg==","shasum":"7691abd7f30e92158f92883e6e3301378c1ea8c2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.7e72b66d.0.tgz","fileCount":13,"unpackedSize":201904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC19WCRA9TVsSAnZWagAANN8P/2x1GFfAk42boytkrxxd\nudS3ucQyAD5CMhhxrsg1cPVGg6peWH9rzMoAbJH4YJtXxUNZ4uYOa6T3o2q8\nDynGyzh6dYbvbW+tLuF/lYnrinfoLKPr2rC4EbtEC4efOeMHSD1mniiYJiwl\nnrA+eKQfz/n0ysIlWX2/MF2s/K2VgOWgdTVOiCbSDvuwwnoZ/3TP210tgQNi\n1FxVIDrN3BpbcCbTUA+q6OdvBGvgF7rNPz7SZ+J46TKuT4drUhZvHuIA4nRV\ndsD6KbsmFthHj6BKZHdSSeO44/CKH1Ees+gD3ka0gxQes3pUERMONHthSIRA\n1ymAuR2GUs/MysgLYWS5OrsOLcrqpsy46Iy81zydlBK+lCWpNXR1hLC26HcS\n1A25GUky/7GVQS7vLqVF55xHmW7Tkk+bdsf7ar4pklDvOnT2UCU7o4pZu87x\nPWz4g1tvdH2RrtqRyvf0qfEM+rxJk4umnZMpRqRkpwzL7UJXoTbQFCAb4uqD\nd7l3fYDKnPDzBTOvdCHZ43RAZALz5W4i2qoDNwIKjfhr13Pk4VEME7GrZEOu\nCIf5KszrUI8Oj9gWXv6IfBe33tdJ/Lez0c3iIR27xyiP8vwHPuqIIChsV7GR\noX43n2ltZzU2pgcmE3RMhKXkiFoHVEKxnd2Nfkt1pbj4D23eGDhv6qyxzkUU\n4Xwd\r\n=TvHk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBIGYG+zKHVIBxr7yWviFAwUosLU7pzJyiyQ0dN7QOZqAiEA851uWULhr+sp5xMCOmFNaC0mS7ASnS+9wbxukVDaigc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.7e72b66d.0_1611358037815_0.7352840896353317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-select","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/floating-label":"=10.0.0-canary.07deaec27.0","@material/line-ripple":"=10.0.0-canary.07deaec27.0","@material/list":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-floating-label":"0.21.0-canary.a6d6a1e7.0","@material/mwc-icon":"0.21.0-canary.a6d6a1e7.0","@material/mwc-line-ripple":"0.21.0-canary.a6d6a1e7.0","@material/mwc-list":"0.21.0-canary.a6d6a1e7.0","@material/mwc-menu":"0.21.0-canary.a6d6a1e7.0","@material/mwc-notched-outline":"0.21.0-canary.a6d6a1e7.0","@material/select":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xexhaCRK8RuUGc104hwCbgE+6y8HwNevcBsYi+zxduPUWrnOWc6rdjdVVfMvpBgB1Nh3nGIDDYNdp9bU+wSxAw==","shasum":"18903987f1aa45a42535abe66c2115b98395f15b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":13,"unpackedSize":203057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2DKCRA9TVsSAnZWagAAMdQP/1PPvGE0cCjpZbEy8nQJ\nF2qGHwOnH93LARP5cN+524klaoHR41P6DvPoYvogGcielObHxN1JfzhQH7rB\noEqd6kmFeno4e2FhYFxKztG1inxQrJAtP5WLe2dcrrCDtdh4gUQXptkJJR2m\nwAYAcX0GXO1dGW03OFtq3DzCWS7bsnfuf6iVkL9YvMB50i2EioLEUeO/UJUK\nCnKnmRJbuDD/ns6kcm5OdLLRxnm/drmFku+d61EsIR+7J4cIg2o+Z+m/kI+J\nLELbC2bNdRXft4BEzbg2t0q1Kafegp0QkKIRfFqYdiaW+5dVlbOIWQtB8WOg\nGoW1zo1uh6uE1PcZ6saWJg+I9Vj5AlgLevLichn6YyFKwabkWGTZU+LV74GR\np3pHlIY08kieCM37aJy2VmLNlbu3DdOf5s8fZq4fCEgWTflwwHwWpZ1rPcpJ\nAskd+cKby6zDtTqE47yWaJMAsy/fiXGerMAePQcagoTDNO92JFE+hCO8IK29\nO8Kxto++P6SK2/vh4Q6UJ6MC4WBt9e1wgUAziGWz6fa+fqgTOaLtTfvJMMe8\nRllmbz3m9ubFVrhtZiYAHdhDU3dEVGfSiar/anyXNx5m4YgqARpqFSi+1MFW\n70S5LIwIr2UJqd70QCNgjGgra+twl38WXprq5A0kySd7gaNrbLiuc2ZQS9OX\nKQuL\r\n=uWLb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDpbiDOs7VmuLwY0aFDQ4XDXrGWRPq6GL6wnfZL4x9cAiEA9fLfnEBr9pQccq0AwnVImJ7P0AFTVgWG7KO0kDUS5l8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.a6d6a1e7.0_1611358410014_0.287624365488204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-select","version":"0.21.0-canary.b95fe100.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/floating-label":"=10.0.0-canary.07deaec27.0","@material/line-ripple":"=10.0.0-canary.07deaec27.0","@material/list":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-floating-label":"0.21.0-canary.b95fe100.0","@material/mwc-icon":"0.21.0-canary.b95fe100.0","@material/mwc-line-ripple":"0.21.0-canary.b95fe100.0","@material/mwc-list":"0.21.0-canary.b95fe100.0","@material/mwc-menu":"0.21.0-canary.b95fe100.0","@material/mwc-notched-outline":"0.21.0-canary.b95fe100.0","@material/select":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5HWgjsHajIV0RHqxx3xsRlxgTPbg7Cu/XAhn1cUJv0dkGs8YN6OrEvm/Y808ZbSQuPPvkjuxxXNt8Uy1OhOOJA==","shasum":"3f19251bd198211a41a63ecee5a9f7bf0a61fcf8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.b95fe100.0.tgz","fileCount":13,"unpackedSize":203034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2VJCRA9TVsSAnZWagAA/4wP/03ZF+7ylJnPMc+VOqPd\nVtOiTvOT4thEWN8uaEtVniBm0TG+8Dam37hy119Mul2g5duqUBoWliEHcg47\nhGl3YPpTnhS71yJ2NBnG4Cd5sAX8EPRkzVVfWej/BMdMrZSyn4Zv0ouN+NI/\nvqpVJ8lH4U+Eu+YD/naWz0X+9FfkPVs9goTF//sV8+mLcNrAzx8FBLm0FAnZ\nVs2yvKomESgA80Pz5AZkGNnQN3Bfzz3AvBsXYOZH5L11zmogTDusQI+wboSO\nulXwO4bYuMpNOZSyzbQKe47GSIwc8blCP7RWwJP4AIvOiXlLmuhU8JC2/rrt\nxXI1U2tswMbrdfHCJ4rdLUJo/XkckzkwQhTJJfth4epr18H9W0q0+CAoBCLM\nvZY2Ny8uxY0tYd7YRFPQHQ+fX5UOwOI+vDv4saVROKQWMyS+ztbBeVMWAEwP\nvIDeTMep9uuLoktRlak6ewbH1iLq4TjwxhAxxhU86etVzoL2WvbhOTu554xq\nV9pIHkk/ZOepdu4v/e+F9Cz9daxnU+qA29D6D6Ot3jF2vHepEKQuM+gT6gJR\nSVuOEN/ozRowM++2mJ8PAy4m5dUtkXszK11EM19TIJy/PKNYmw3aNDhmi35y\nOb8nRXlPudZdx+qwvc+rOnSqEjDRjV5lS5O5LwSdbL5n+RwS9Ai2RFAwZllh\nxh57\r\n=eS3U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXcAsAkTXJmo+hlaJsf64xsWtB9Glug0QzxTOXUN0rXgIgaj2Ix3iFHPvS3dJI7taT9nJQKPjZ6nZcM4gT2Xv+Oc0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.b95fe100.0_1611359560623_0.25021615282499354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-select","version":"0.21.0-canary.c8797192.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/floating-label":"=10.0.0-canary.b9adb7a0f.0","@material/line-ripple":"=10.0.0-canary.b9adb7a0f.0","@material/list":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-floating-label":"0.21.0-canary.c8797192.0","@material/mwc-icon":"0.21.0-canary.c8797192.0","@material/mwc-line-ripple":"0.21.0-canary.c8797192.0","@material/mwc-list":"0.21.0-canary.c8797192.0","@material/mwc-menu":"0.21.0-canary.c8797192.0","@material/mwc-notched-outline":"0.21.0-canary.c8797192.0","@material/select":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-y5RT5+jtlu5xEfvh22+PZ6GR4VbCKvCrzh5n7hoLWSeckig81wjtf54u+gRU5jPFT8Li2Pof2G1vNYvrgT3MrA==","shasum":"af277795131dec441e9e917015ee398f01a28284","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.c8797192.0.tgz","fileCount":13,"unpackedSize":203034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2jfCRA9TVsSAnZWagAAUjgP/AvPmRkTjGGIeGVEbZV1\niuPH6/MDcuHyOTnJ+8jhTymDfo3f8bck2hI8ERcm0LMBGjZdVepj4OQvu9xn\npCBsKbDRdu/o3U9HIKOPzMiAFvwgwje68qnb+ebFuy7jXHgDMKGdJqg/sdCn\nCCrEZMXCaThJGD1gq1CcvjuIcW22YWuVJ9HXm7+KTkcDYBfcWnyoxJ17idhP\nmpov1h5FMUV7i67i24lJ3EawZEtitH7g+oz6946OR7DYHAGzWJaUWRts1uOe\nPxUQKsPFGQo9ocflLOF+Jq6u6+HLOIss1Sfrh1PdOjhVJHYi/4xOTqMrCB4S\ncFQizxnleFxTMGNSTN5QyiJf5ruG3J8YaA8TVB4Ii03DtOHOXR06NVgEMCGr\nOf83BNpO/J55SPgTei4hkP13I4y5aUsXNMfoNzDCE7P8SGlRXMvM6OMgfaiO\nsG4S0C8GYBr1Y3wAyeEystarUQYSXzQtkklB3B9O8AWC7tkCcDEWPg2nlJPZ\ng1cWW4qmK/dzJqkWwhXrNqBegKYqvcfezjkK+fzrfyGKJ9/sPLFdujqEk8km\nDWp2cbD+20c6VPCfBNdFzJoOJFkTAuummTqtPUNw2mt0H8xmFLSwJihTD6h6\n6hc7GEoJ6RXJrGDBNl2lN/b95yCIXqpRMMtrCaXx2LX0He7hHE5nuDrTiR7I\nErZt\r\n=xdab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjUE10v/ZMZMQI25ui8WCM5ILFBC+aDWZKO8QeFyYCeAiEA1znWv0S2iXTArG3w3Vao7hA17DS/qdWF4hwiZBd0Tpc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.c8797192.0_1611360478615_0.2968597079908877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-select","version":"0.21.0-canary.946f5563.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/floating-label":"=10.0.0-canary.b9adb7a0f.0","@material/line-ripple":"=10.0.0-canary.b9adb7a0f.0","@material/list":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-floating-label":"0.21.0-canary.946f5563.0","@material/mwc-icon":"0.21.0-canary.946f5563.0","@material/mwc-line-ripple":"0.21.0-canary.946f5563.0","@material/mwc-list":"0.21.0-canary.946f5563.0","@material/mwc-menu":"0.21.0-canary.946f5563.0","@material/mwc-notched-outline":"0.21.0-canary.946f5563.0","@material/select":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-31hq+TaPZiKJshRUe9ZnhMke+rxZPJatuAL9tYfZ6igCDpD8I0WSYM1aaHTJEFi6rcFRLi7t5y112A7jgEOOXg==","shasum":"67914b1912ceeb52c380705b8907fecd6ac33220","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.946f5563.0.tgz","fileCount":13,"unpackedSize":203572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3FjCRA9TVsSAnZWagAAsoUP/jDQ2nut3lCrCLEZCDPb\nRbmzArntJbM3OChRbiN+ikkXauX94Gzl7WjGehnXF5Wpd9zsZM1y1Y32cs1C\np8kdKQeDdpsyUc+og/PP0sahHMGxkIxuJHycS2gN8G1P1u0wACk3aC98hMUX\noewXPyLvLT565OsmcgdkuTEqJz0dfrtoHLNrK6ZFSpg/X88tN77zhqCmmh+p\nJDNglaC0sxQkTs2iSwwCAQ9AlU8/drWsu5j9pVj09Fy8E8Ojy8l+3clP+xp3\nAPrIoKbxQMH7QgkvFVzZYIoRbcSlG9HohCx3jJgoycoEQGXQeTuXb7Wu7oVW\nmenbeXyifUrnX1tbzyuMKTFGO7lJAfWlB5drqZ0FVK716O1e0El3R/TJAI3W\n4rWS6tmJ9S5U/Zyodqu7kz6Q9e8fPnASpUUk0NDv5wc+/r5ZPVWWzzP85yjN\nU61MtydFltvwe6mgNErp1P1n8euviCyxR6NgPU07H174WEa8Whw6M/8kTi6G\nbM1bSNOmHl1d9CL2B4kDIESYq5X3opVZjsrPeWyYnGGdyZRfYKhN9zq3/Jw4\nHikj5CIpBjq1Kc1n/aeYSFg+62Wi0tTnlvjeTrzVkX8pX7F5lKzk0SdRa2Ic\nE/QjLLyxQhF3EGqnF7ObXAtNjGdbabdEl8wlR20A0xhstWBAeRFJnvUhWjxi\nYAA8\r\n=bEYm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAlUOc1loaQgaBekWyTUrZuRxccxg99P/zaBKBxOuZgAiBB8gSBnpihHz9jL8zxzA6QPkcc5NEpSCEuosclrBrf2A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.946f5563.0_1611362658882_0.34471696606810376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-select","version":"0.21.0-canary.43664f0e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/floating-label":"=10.0.0-canary.b9adb7a0f.0","@material/line-ripple":"=10.0.0-canary.b9adb7a0f.0","@material/list":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-floating-label":"0.21.0-canary.43664f0e.0","@material/mwc-icon":"0.21.0-canary.43664f0e.0","@material/mwc-line-ripple":"0.21.0-canary.43664f0e.0","@material/mwc-list":"0.21.0-canary.43664f0e.0","@material/mwc-menu":"0.21.0-canary.43664f0e.0","@material/mwc-notched-outline":"0.21.0-canary.43664f0e.0","@material/select":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-krv15Vq4nxVoR3XJ2i3BBV+PtWPFhyUaPjdMXuShDmtrZjvWYrXxL3FEKdSk0q0C2FbDLiQkIScaE4ygPL5qoQ==","shasum":"46e38c510ebe2bddaf087b55e363ba04364b7c28","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.43664f0e.0.tgz","fileCount":13,"unpackedSize":203572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0j7CRA9TVsSAnZWagAAJiMP/2dy0yzMRBtJkHPqOWRa\nLO7V6MS4zJLOrDhYn4we2OXPYoIl1bgd2tjfj3jSwK/7H9+1xk8DMvjQZHTq\nYWs8zVtTmYPn04UNR2L4+fP6scFQ7vVgjmtYdytqK8OgxIcSu1nPrbcCtlsQ\n/WQspUpeGUYk+dtBcknjib3OIfppQiaE5+pB9ZlLkx3qWsDAaei4aDpqx700\nzUr+DELj+ANIgiH3j45Hz+kAlTPDi1LwPJCKlUBwAEElFWYwdRqqesGtPXSY\neaoAwRi3l/S30OBLzhdRTeYcQ+nrzxuAewvUTSDvmgZKPUHWpl6ZNRKr+pfV\n+lLJLShirFMfyIzPjlYoZE7RVQejJmNrp8EIofHsX1q0MEG+RZgkGsd+NI1e\nX9ESQNn4/M0AT+XPbSV6aLFdMOz2wE3via8dg6zwJ+EVMXS1/YQvekaYeMNF\nHOR7sPSdLgfJ0w8mSXNynoiodWLAg1jekfwQ8ANzUec0amqP4KAtllwhZz65\n4E/UK5MZpxG399hX0BVWNtXZFWOrsLWqBmdRALNKUfUnNn5U8im8xD/qqC1d\nbXxYPtMkjV6Z5X47kB1t1hS2f4AAoTrD1aXHscT9z0MLsRksk1u0Ev8JACqC\nwMjzWKZPPSZJdoh7zR31cto7Ej7vQ+hMJOIHPfa6/pN23f9k8sFkyzVtuxQ3\nNFUW\r\n=FxCV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChQXPymxJnjgUYNs4MViM5W7/ODmsmqEeg/prwtSMkSgIhALBMUd7Wpm+/AM1o1mMr1MfQ26oCeTE/OlfNTF9GG857"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.43664f0e.0_1611614458558_0.8689521531228914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-select","version":"0.21.0-canary.2e769e3c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/floating-label":"=10.0.0-canary.b9adb7a0f.0","@material/line-ripple":"=10.0.0-canary.b9adb7a0f.0","@material/list":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-floating-label":"0.21.0-canary.2e769e3c.0","@material/mwc-icon":"0.21.0-canary.2e769e3c.0","@material/mwc-line-ripple":"0.21.0-canary.2e769e3c.0","@material/mwc-list":"0.21.0-canary.2e769e3c.0","@material/mwc-menu":"0.21.0-canary.2e769e3c.0","@material/mwc-notched-outline":"0.21.0-canary.2e769e3c.0","@material/select":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n675Spn6dHKmUSXfi+ozV9xFmNKq6EYG0tdf9YsaJFY5lURvwZNESpqaiN07ih4l0UQ4b6X1K1BfiQ++GzpMsw==","shasum":"fc2703b60b1f70e140b7726d99d664ecfcd98232","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.2e769e3c.0.tgz","fileCount":13,"unpackedSize":203604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD10mCRA9TVsSAnZWagAA8M4P/An7h4QZFmqPZ0W3XH3r\nw1BDWY4YeBVRDAqpYUvaUGBPcV6Ohfs/BHL7xIhEwQRxdt53l5t/HBbw8OQa\ng+k3QIyWrXk34Q7+ZUfpsAa6Yt2TTKsrgNaOpgpSocLxpD42akomjmbnPchX\nfdcgbXLK6WYr/ACOpz8jpVqFFusYOakfyPXr3N5F1UrSspjCDD+2nBc02F2R\nHJ/TuprcWIPqxWVLEVz4pjIMTgInSGHs7ZOZEkjHJiDgeqXpmyWe91YVF8t2\nA6lxCMAWJZx3yc2yIxzU0PCgcoychNLQ8vUPxH4mMEnkcyhXYPiNeCyk2xj9\nSAF6gLWnlDLui2+B2wq8O7XGEdwVOSbW/3bLS25SmVL9ri2XeRq+4uME3ok2\nZRZi6AyrBYNlFYRDTGaoNUh5C/3AKghXZrnUPvqbNfu2lJOmESN2l4SVfkyp\n7OmkEmRiDgN818DZEM5tAQisIsETI71AhmuvIW2BR4y+DmSJrj13t7TfR42W\nOKD6d1YAWZdGMJK5IZ9V/8nUwNj4+nbVuJFmzhHqfaQWmGADBSl+zRpFAwy2\nau5BTJbrBPDJD9g89G1CZ9V4zqps/hEjFCZ3rxqkpqBCrzTgzh+aW7bhEX15\nSb73bdYQp8b+/Xok8Av8Bop5H1HaS2sPuAx/YNo9GlQjMc8FTExu6D2rkF5l\nZdmg\r\n=rvtJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEmzGghEKkCoTWtYExpS3up/kiwaJDK+Lmxc4uHix4a1AiEAprsb6XcWc71ht6d2ml7TPZAhBQVb9CQlnZzDy9FSn+k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.2e769e3c.0_1611619621592_0.9968978316075681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-select","version":"0.21.0-canary.14e01610.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/floating-label":"=10.0.0-canary.96878e1d0.0","@material/line-ripple":"=10.0.0-canary.96878e1d0.0","@material/list":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-floating-label":"0.21.0-canary.14e01610.0","@material/mwc-icon":"0.21.0-canary.14e01610.0","@material/mwc-line-ripple":"0.21.0-canary.14e01610.0","@material/mwc-list":"0.21.0-canary.14e01610.0","@material/mwc-menu":"0.21.0-canary.14e01610.0","@material/mwc-notched-outline":"0.21.0-canary.14e01610.0","@material/select":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-f036zPy6H4H4eE/2mkUbmhkCM4Gsd/WQK0pV2ZoFoN75VOTpcJR2W1nVXtvnxyRNf3OY0r1ok4iEoH78oEeDSw==","shasum":"25ff671b765ece0a3056154f81934a071662e976","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.14e01610.0.tgz","fileCount":13,"unpackedSize":203604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRvCRA9TVsSAnZWagAAZzgP/3xeNtPVY+Ti6x+gE05T\ngi3SfdlwMz9+NdvGXC/+cEyyfM3wFnl/ohF4KkVASitPvWSqcR8uI0GNcFRX\n36fH5dvTSwogX7XsWinQdM6h2EgaP09ta0ccl/WJZ1yF7YYZfcddqHiA2vup\nS7f8M6xTzrrkz/2ZqHpnZGkesAap1JfjXf+Rxanktjv8Hy19nQSyHGR2EKnv\nvLInCSWKOkHsduCb/XZzg17k+Jzf1PEl6UWncmv1fVOoMpEWhEU6zGT1faY8\nFnC/8tGXuO1NjQt5E8zJZoQFfUqMR+lEwaAKNwogM20v086VYYqHJqEkCIjA\nplpCcs95SblXGbKM/wgORpk1RQlU1O5ygL1ivERnKJmTleKU7vG4EO1Y8WkR\nOwa8LlATDL/HZ4EjAny0EjMSQKqo++6AJv6xcGw3/ps88dTTZOPa6IngwfHD\nDxOTUHkS3Q6ZgoglsrLXMDE7s14WtefcyHT8pwVNCJF2PdAU20JMp/cEJ1Fe\nqiP/CDDz6/fTwPVhoiF1p5r/4YpWV6vQ6J3orQSWKohOZ5FtkU/eaCm4sn16\njFgkzArBUeTfUOZ9KHDs3Q1wYb+RSi9x/EhG+s9/dcdLaT60Wd+OiccH9NIt\n4unrFFBr/qHUlR0iFhYHto3VPGOTry3YCKKerlApfBBFUJrLEd4xwBMBxME7\n6TBv\r\n=GMgb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUpRmfQa/1xCIFf09bDxkws+W6CBR7M87wqYzhnvAL3AiABBgC2qMt+Po+Aj9C/wQFuK0GAD+RsN4PAyuSh72tpMw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.14e01610.0_1611777135315_0.11131542104439407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.5de00c1b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/floating-label":"=10.0.0-canary.96878e1d0.0","@material/line-ripple":"=10.0.0-canary.96878e1d0.0","@material/list":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-floating-label":"0.21.0-canary.5de00c1b.0","@material/mwc-icon":"0.21.0-canary.5de00c1b.0","@material/mwc-line-ripple":"0.21.0-canary.5de00c1b.0","@material/mwc-list":"0.21.0-canary.5de00c1b.0","@material/mwc-menu":"0.21.0-canary.5de00c1b.0","@material/mwc-notched-outline":"0.21.0-canary.5de00c1b.0","@material/select":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fmyTtJNrgxElA1pMIgqfgzUtikbr5DMw6K+lNCyjQD2+aMB9cyf48kt73XaBZuHNShDRDAJsyM9c3T0v+90RcQ==","shasum":"a18c4651001d8f7b5309797018c1bc3a904c2892","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.5de00c1b.0.tgz","fileCount":13,"unpackedSize":203604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpzCRA9TVsSAnZWagAA+BoQAKOjE491bi1HEHKLvzbt\nPRi2hHIYfQ2ULY0AlY05RZsRG/B3l4/nESqRS4MS2ztqTfK478rC8RU51gyH\nsQ7PkUXiwoHSsSJL8yFbDd2BrExXH8js4CZ/V6ULwL5kkU9HfT+LLkDvWhMb\nTT7OEJOrnYrMuoMXOKKjlH66XPlbd5o/q15pmSQnzBQYxlE5BGi4yo1ZeIT3\n4mHV4U8FUY4jViKv/NzG/uG3fgDRKx6NgORYPbogjJ3Z6aHLbYnc3EFJBm9/\nJAM04GguRz6T71R+AIWZLcEi1JNoOYMoElNhEZfMtLKgdQTC0jxIq1x826YE\nHC7nk9EVeOZt42ELMdEZ9V37UbfbUEEAsG0SJ4A5e0ifPMjJdi90qvDelNP+\nB7oncFVBVZagKk+K2y8OZD/9w2FgzygIrRcL4ndqwGotlTbnTMJNtF+eLS/F\nGEPfX5DaM7uQciYy0lROUopWXXudeg+u0cVrqLlpzUAf0vu3aWgHVrISNU5i\nwF3DP+bq7ht22UwFle5P3rK0Ag2e+DiXuZ4AWuevAPOe97TebObKrIz3rga/\ni9X7hVjBeN9pkYFGCL8Ymeh/QBPkNzcnJ3pOGI4+PTtoGyutVdUIQG83Qkie\nPB4PxnlZvB/LjSDdT5VHovOIuVXzH2zztLVzxXY2DWZivzohiGIw6D6Xs75k\neZJg\r\n=/nfi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0bb2pTfJ1Hzhw+pKKQnpwQhkh4vGbe1KigDONgL6EjAiEAl9qfDS9wVnxf7xM253OOBAhYGRZxDa25u2FaVEuLRC4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.5de00c1b.0_1611778674926_0.9533365039072359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-select","version":"0.21.0-canary.5a328336.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/floating-label":"=10.0.0-canary.96878e1d0.0","@material/line-ripple":"=10.0.0-canary.96878e1d0.0","@material/list":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-floating-label":"0.21.0-canary.5a328336.0","@material/mwc-icon":"0.21.0-canary.5a328336.0","@material/mwc-line-ripple":"0.21.0-canary.5a328336.0","@material/mwc-list":"0.21.0-canary.5a328336.0","@material/mwc-menu":"0.21.0-canary.5a328336.0","@material/mwc-notched-outline":"0.21.0-canary.5a328336.0","@material/select":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-XK/IWejlXScZxiXvOwSSDql3BHNTal6+nEadOa96F0oY0aE/gorzmnUIXptUVVv75fiTPIkfzV3LvkuiLeEYHg==","shasum":"4a9b5a30204e082c80e67e910de2450359eb0ac8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.5a328336.0.tgz","fileCount":13,"unpackedSize":203786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExazCRA9TVsSAnZWagAA1AIP/iNtvz3fsIryZg6JBt8P\nR5xRtIb2nJI3jmO/+GioMzRrk6O7aDR54F/NVbYS+rbqwRH6et4obSJRS2Q6\nA3o6AvY4r+M92wfVr089zAp5ikP1wVh8LPP8MRtbUftsDaWiPW6ofVaZjbFa\nWqDPZBGIEwyWa+Bh88ChmSTAjHkNvSqd2a5629TY9PcdpnRccUAL41CR3ihc\n2wJq6HTNROoOuCJ8tcspDcQlBzgvnMIgU/wZIMi48rSkazyjAvQLSv6bH2qv\nRbETIOo8q3a5/lSVHkAXIJh3shy5Tc2o5wRZ5mZwK9qn2ct6cKTl/Y4xe29V\n7wFOAPC/zjBd/ojCRoZGS6ee9oM1/3WPCwqokgIt7hXo5npQy+FnrqlY3QBM\nRZY6QhbDWWKAUE9ZYYX+Lshp7L+1wYEJe7Q5v0aTObn5Ngd01nAaetiOxBO3\nm+TuHvVv6otNNErMFR/HSe3+V2K9MKO3eq+PNfogpaF7m8I28O9JbG24I0mx\n7TEG/8qdLKWDc6nlh32dOfyu7/qjJoKFz1XZ3Dn0bqBe5rYE90qu9xYjqBTL\n/wEfQuBr9GlrLatmo8v5z4TQ/6bI0JNwZsQPKYM0L/jSHBtcCixsregKkAdn\nS+3lFv3gdJHPWt8mkGv1RphdwsnTET77pE53c+md7t31u9S2bF/dqe8T0t9s\n8hdB\r\n=7nQ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJXTfbWf1n5o1kW3L+oVMJu4ntb/a/lstftviysPUGOAIgZSwoxu0y1S3ie9iCVz5kf/MrQYgwUaWqYmCl1x8S35Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.5a328336.0_1611863730887_0.7730906143898821"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-select","version":"0.21.0-canary.533b1251.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/floating-label":"=10.0.0-canary.96878e1d0.0","@material/line-ripple":"=10.0.0-canary.96878e1d0.0","@material/list":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-floating-label":"0.21.0-canary.533b1251.0","@material/mwc-icon":"0.21.0-canary.533b1251.0","@material/mwc-line-ripple":"0.21.0-canary.533b1251.0","@material/mwc-list":"0.21.0-canary.533b1251.0","@material/mwc-menu":"0.21.0-canary.533b1251.0","@material/mwc-notched-outline":"0.21.0-canary.533b1251.0","@material/select":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ZT6Kag2eG2/qym86r84dO+psju+9beyL5OKIx4ZYYaKhHs+5MFJS9/nGu+SLXQDQ/vhw23Dul4cvd1fPImztdw==","shasum":"7aaf2e9d3df9aa6e1b656fa3686fb12a8f0bb8ae","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.533b1251.0.tgz","fileCount":13,"unpackedSize":203786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCXkCRA9TVsSAnZWagAAtsMP/0LZcxzfGj0zWgL8bZWq\nzkNbk72Qop6R9Z/P+/Mj9zEmWyT4OVu0XFjlmg96hmqV8+7xAP+3YgsPUmi2\niBN/GGim0IK5tI8/yvpxIvJXVWN7QUQicS6F1bFZGckf874/3gWKGE2ocuNQ\n1s46jiJXx5Cl31PmA77CNYydgrSiMs9uW4q9ZDkiIjFV2zcLBCCvM+RQDAkm\nVW3LuyDd4cyl51/DzFeDQajfJQTDVbhVS81x9xZg9sYIeJhJhRfm0MmKYILc\n0X9lnDt3rsj5XIANIaRqf3OXU/PM60jWA16oa2ogRJb1K62f37aRjZlv1XjC\nI7+C+/oQJ+vPjN7FYSOXX8CEMooRlgMS0Y2+KZKraznIdTBuBA6WaA5T5obu\nSpQg8dUHOPCuBSKzS+zg0Z5Mp2VBaExAevG2xNHTd1p/xi/3L1a0+j3bpX7V\nxeztMZeFCoeEte7GpFW2GkukvHeNLiCGXoPEGeYbGnON4oiBc/gEs1B9wEGl\nmX6lqAU4K+0QOiYo4iVr/iGkbIVgjXPiACMt2vBhAIkcEnq8g1Hy0I5KLr+S\n/Y2ohFx/D7AMhXhACZ3TpLthPGxOdPZjkMV8eT/xr5hgdfeFRtphmuvqCjPY\nLyhgWmaeaxjDxlQ4RWCQJwIPlkl3LC73KBPlD+TLa96POwDQB9BG7jEKZv5z\nxVU/\r\n=g0EO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtCEehNygDcdP3ugghobGyjLDLlaRR6XkAZ/h+99TZCAIhAIy8g60uUnZwEYiK1RMzHhovLR6zZ+99vlS+RV5HvPcb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.533b1251.0_1611933155910_0.20792882723201167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-select","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/floating-label":"=10.0.0-canary.96878e1d0.0","@material/line-ripple":"=10.0.0-canary.96878e1d0.0","@material/list":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-floating-label":"0.21.0-canary.ab5c0a10.0","@material/mwc-icon":"0.21.0-canary.ab5c0a10.0","@material/mwc-line-ripple":"0.21.0-canary.ab5c0a10.0","@material/mwc-list":"0.21.0-canary.ab5c0a10.0","@material/mwc-menu":"0.21.0-canary.ab5c0a10.0","@material/mwc-notched-outline":"0.21.0-canary.ab5c0a10.0","@material/select":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-KlGrn+cxpLppFTJrRlXsQFWN92YSImvY2otNGS4COBd4qMx33pT6WPgvQsM7hKGKm/Nlbmi3xgfBfOzesx/nJg==","shasum":"16e344be4c89dc76495c2e367b423dec94e42e47","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.ab5c0a10.0.tgz","fileCount":13,"unpackedSize":203786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbOGCRA9TVsSAnZWagAAlMcP/ApzooMq1ewLT/gwqVO/\nmwIwBA9Xa/xvc87+JAWrX06xYuoeMeYVr3X2kdJvODlg/Zh9m74K3xyTVkPZ\ny7aeZzTU5cJhnJImpTm7jr5ylqMQyrDtiNEbZqUwlZvoxvEu3+OsxMYsucGe\nkxI2+nwqPFMiK7B2fJGl/kQ2585mrXOv/HSiyF8glXbgfM6K0lOLnLihKhmO\nzWZEtutco1Mm34JQYW0lPpqaEIfTIiUtcFlZy8NlPioyAhI65bTEAPA0R0P5\nziNijR+0Fvrc6G1jwykrvxomD9mKJ8bVNRtZnb33af9Bbhj+Y9O4yJe4O1UH\nyGXCaMd/c9cQa53GN2Xrj4srJA0ozZ68XT8Eb1v1RSbABzMLkavfCx+8HRDh\nWtqiuuERiksQiBBs1oFbf3rRXSzY/zkv56RoK+N3hz0CtaE4mbvQzQReyiJX\nzkMRRfygnTcIhOY0DSix6Z7fAACMhbhqKY915To1uQunBzfXVcm70McUTZ14\nU+Ef0m3qZvlN1GZaF+Edpsmyvxyk2/Yb00G8taJs03hAsZW1oDMJJGNW9trT\nXhkSpAYSZytIzvzRcw6S7z+zKtQ+8JG81FeirUu0gxDWkzObmPFRIfsbbZXM\nRzkHALiaGyj5FhxWZyCeXAE0zmNC98oz69mZz+YS/R+GgifF9s6IzeXDWQmA\nXCQ5\r\n=1A92\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCefeKWPDjLTSJ0X3EUGQTJIcXKCWmlqohgRMwEorZBAIhALOpRs3marzhi5NUAX4MZZx5ILkYjqcXf/0Acx1YHIR8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.ab5c0a10.0_1612297093570_0.10365176696848244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-select","version":"0.21.0-canary.b7a40b27.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/floating-label":"=10.0.0-canary.96878e1d0.0","@material/line-ripple":"=10.0.0-canary.96878e1d0.0","@material/list":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-floating-label":"0.21.0-canary.b7a40b27.0","@material/mwc-icon":"0.21.0-canary.b7a40b27.0","@material/mwc-line-ripple":"0.21.0-canary.b7a40b27.0","@material/mwc-list":"0.21.0-canary.b7a40b27.0","@material/mwc-menu":"0.21.0-canary.b7a40b27.0","@material/mwc-notched-outline":"0.21.0-canary.b7a40b27.0","@material/select":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-j8PdK2zjk39bXC/MVDln/dxuwWowNAtxyksSTwBPN+AlEaakZ/ulmOZoJjouwYyudRswdh8t79+hT4541B8mpA==","shasum":"4723950f1cd8d038ae61ce53d9dbf2c1ba968c2b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.b7a40b27.0.tgz","fileCount":13,"unpackedSize":203786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGruOCRA9TVsSAnZWagAA34YP/386wIgUDneKP0EICI8i\nRcwN+LGvjgKpwS5rclGCtqB05Cu2FxxfA1jjkxouxw0XZZ576JL4fxhtrN+F\nKjBxwI7lYxGyFQNmP2zxMJ9Fq0OnAOo6m/rdM/t2rEwJigrKtj4n6ym4jgli\nt4np4gjcwAm6aoB3pU3+ZsdfBAFlEqo9Tqmg82K8i4wBPeX6AP+5nm2LCCRT\nXVd/ntVeAnrdaQbgKZV8juiiJsKO9l02h7nFrLj0r0+sMTQshbrsvMwtl+F8\nEPGEKQlERKsBKNKIWbn41SBh9aTXYVlOWMP6RM+DfNz0H0EfmRaMdXMhu8m2\nLoXUkzISMU/b9RiwLpasgQzNCH20JuNkq8MkGRStxh3HbqeyUUVh3hQzd1nz\n6R5dDEetSZAHWDgu0RiwOg5Eqtr1Hc7aa2P2kYYRPHZfdOI9oGvdHXi+O0eG\nb0tiYngPFSr2YZHXIHugW77a8x5xprFUus9UOxf5rZbQ8klVoTsqHOsJJJ17\nRyOGFN22yHDiggQRnreFoufG0IVd13PrxVnk5EVYJnyk5yHXGYoueIwBjJ9W\nfD5P43Y9lq9nPNRn9f/29u2IWT9beuFFbUwMVk9YUvrkTt4sSEiMJTe5rNj5\nhrhvfw+LAkBMxQSEXPPGMRM7hCfGkp6stzqkw26kwqfyEsXo3VIQaUbpbYVX\nAgqD\r\n=5XmF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0Vv7eXMJx3Mo5h5+LvcuyW0/1rb9jSe2PS5Xibx41ZgIhAP6BEWEbkvyEtK58f5PqIVIspyLkbgMHP8mZPu2e/iTo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.b7a40b27.0_1612364685847_0.5159650729195235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-select","version":"0.21.0-canary.0fdee204.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.8e66dbfee.0","@material/floating-label":"=10.0.0-canary.8e66dbfee.0","@material/line-ripple":"=10.0.0-canary.8e66dbfee.0","@material/list":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-floating-label":"0.21.0-canary.0fdee204.0","@material/mwc-icon":"0.21.0-canary.0fdee204.0","@material/mwc-line-ripple":"0.21.0-canary.0fdee204.0","@material/mwc-list":"0.21.0-canary.0fdee204.0","@material/mwc-menu":"0.21.0-canary.0fdee204.0","@material/mwc-notched-outline":"0.21.0-canary.0fdee204.0","@material/select":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-CUWhx0fKomWR5vA5R9PSiVLb5U91LOxryB6BUkWv+ngWkbfdAYnZeaeiqQD3ZJuuMkfZCAbvSmTkZVYnb95XSQ==","shasum":"611b192e069116790b50a7b903102bfbe818c6f5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.0fdee204.0.tgz","fileCount":13,"unpackedSize":203786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuzJCRA9TVsSAnZWagAAjggQAJqpczHz3uhFWPHavWM6\n8EsuHTfETKG7aq42nre79O5z8rFNXTQEXTL/0ra9W13/+/TIcRYLQvMk9tKu\neO0kQc51VgBC3T7LChDtNArhQxGbR0U6qcJI4h9Xp7lpgNYxp6huGFKTWOoN\n2OIdTPhSefl50I2hZ+0rREQ5TA+DAsYkVOn2MufgqsD6PKOSFzvcuQa1RJCO\ni4H1T8qJM+uEkfvfb+ys81CQWxu8JNEtcmH92lN7tBQd0B4lD95YCBTN981n\nW2Qp3UMBKvVuvGpssTZRZmyewiabZH3SgOqNUHMTH1GGRXZvMcE5BqV/22sn\noeFKCbeoYQXvPfGJiBn/arvy0oQO5/1h9eY2dG62NrRl2WVhc6yg2T6l+Gch\ncYAsCWizMLuyckyhUn6APVyWa92A9hEt8NoZTjArnrEUgfTZYwUrHBrAhcHm\nkiQg0ovEOwxWY/EraRYTMQViiJtkgWVE4Gh5N2ACnfU7nShJrR6FG5jdqD8g\n6z6HSO7qTU90EFAydQnU8/cetLx3Y/bu1VPEP+tbWeiyUUmdgavq6uKAJsAK\n5+B83a+9cqK/l5tyIa4EzwCKm8J3xDZ/V+R/zfnGgm4FKtBo8G1ji8sgtQoU\nprafhSK9G86SElnkhgBuQ9M8ktFjHOYoyo0s2dnZbH/Mw/sDHR5eyJN2C/e4\nxAX4\r\n=8+7i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWi5yjwpH0TH1TgDMDZYqApA4z/53wnoNyd3wzKq0+uAiEArNZGt4LEbOzSWrgY2FtbIS0Hh5u7vYQ403raYmKKHy0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.0fdee204.0_1612377289021_0.9003764201598561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-select","version":"0.21.0-canary.5160e548.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b5227247d.0","@material/floating-label":"=11.0.0-canary.b5227247d.0","@material/line-ripple":"=11.0.0-canary.b5227247d.0","@material/list":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-floating-label":"0.21.0-canary.5160e548.0","@material/mwc-icon":"0.21.0-canary.5160e548.0","@material/mwc-line-ripple":"0.21.0-canary.5160e548.0","@material/mwc-list":"0.21.0-canary.5160e548.0","@material/mwc-menu":"0.21.0-canary.5160e548.0","@material/mwc-notched-outline":"0.21.0-canary.5160e548.0","@material/select":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-eA0ebbVyuuPoGO+vGnGS/TkqDjdddmc7iLJ59Jr0+LSO+VP1I1HzqAcFYZTdDX+h4gL/ec/G+v0tST7LhyFjXQ==","shasum":"0f028571db0b205679543cf4a38a98980a8048dd","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.5160e548.0.tgz","fileCount":13,"unpackedSize":203786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdoiCRA9TVsSAnZWagAA78YQAInL/qF4qIIIJqW3nwZX\n5GOGmRFL5v0hbBi/w6Nm0k5d0M7bWVMmf187S0Kyx+KH2eMyHRSTJOck1Ytm\nijUkbv787fvrme8LbBPwYYg2fnfp0aHIk3vIqesQOkuF08YfW4yZBoTaeWpA\ns6Jor4G2tVeYobh7S1CjurY/0WhqBwq8c9xGjGfJHT2SNqziaqDEMpjp8NCu\nNI3/+zqp026XRW5ImzsX+3o4Mhu3OtYKTRZUxbX6LZn1wH1cF9RTjHZT6x9L\n1SDlldAXsXKmmTn2wwFAptOZEU9j2le5a4YNEEQ4FV6YwdK87sbwFs7hCTTk\n9Tid7T5WTfvkUPnGsnDO+PdUvWvosDyRtVoK9LdbV9KEH/qpLZhBYrqOmwUf\nFZXd811xoaE2PU2X8sVWf8rGNmZ4NkmcYq665/tL0OQHs5imeCsk/MlDxFtg\nGwmLnZnpqP9FqgVz9sfgY5iUy8zuKMIG2jNpvC9WFsWA9ykolCSKGWRqctFW\n2l9M6dwJdi+GUFR01+c7Z7w/1sLmR1peC3YSPQboCGsn8Jkib+XP9VElpMog\n4PoA4/Df1KGJgqXfjaRImufhLpbhwzAt7zuD8HXgWY12zaSELe1LqIxJTX5X\nDkKgyxRlEbZ6WUrOd0+UqQCwopQH2GCE3uCbSVCY/W5st9QhmkQ9SbtLq0Nb\nBeDu\r\n=9VaW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFXPZiyHjaLz023qW5NvHcGECoDio7W35hSmyhWKL0KnAiBi+2O95Ki3pKAK3mbpzPo4PEhnD1Avd+to19il+yNitQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.5160e548.0_1612569121665_0.995125884421358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-select","version":"0.21.0-canary.4fa2daec.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.aac8f5d9a.0","@material/floating-label":"=11.0.0-canary.aac8f5d9a.0","@material/line-ripple":"=11.0.0-canary.aac8f5d9a.0","@material/list":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-floating-label":"0.21.0-canary.4fa2daec.0","@material/mwc-icon":"0.21.0-canary.4fa2daec.0","@material/mwc-line-ripple":"0.21.0-canary.4fa2daec.0","@material/mwc-list":"0.21.0-canary.4fa2daec.0","@material/mwc-menu":"0.21.0-canary.4fa2daec.0","@material/mwc-notched-outline":"0.21.0-canary.4fa2daec.0","@material/select":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-GowURhkCqR+oOeW2QQ4p+BElaj60uUTIWZNcaMTgcTZVh5unShNTvSpDOz2o0Cimst9dOdz+6HJWd4GdD0Vn8g==","shasum":"f5e94d98ca5dc59a6291a633b543a2ab94e64db2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.4fa2daec.0.tgz","fileCount":13,"unpackedSize":203786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdUcCRA9TVsSAnZWagAAUAUP/3fURo/UAD6T65x6ojex\nMXaPo1kxG3J60qVdZ5GgiQht/DexyFhp9nAo7P0jVvykXKUeBlleqyfmYpmi\nmSvm6xM6HunR1YNcH4Ik0E3AGEXUGsBe53erB3/DdHJi0k0gy+O8LJ4AZx2l\nBipxP/5X0EObgW8tzpf4bOB0QxMhKNnIxNOZYwcIOqSbTE7cmukRLNzxm3LZ\n/NPmyaXVNKa2FDDYXY4Rd44PYlnj07rt5515vGU4Y/AASKnHXRW7VTAq7PYU\n8v4MP+JmW1F25mzax1IH7SdNNLba22PivXF9NrWDoqYMLT+9mIdWqHYbjY8y\n1eyw13G4FLfSIyKR5QBJifuJk1pjCB4zrBAecMph1CGw5dUaAGhA/a9QKjNs\nv4QgXTUPsSuFsO5Wgd7GO9qS5vmuYP6l3hQP+42526q8JwrNLpBYT5LWOcHk\nx1YzMoCAt9XYEd3G8XlPkpukYRFzDE5AtU3E50rbe9VI25Dlv2o9+weXwUPd\nxPQXCbyxrymDqvIhw0SmJO2InA67IYlpxm/3MfwjuBCguNgJUtyc7eydnIo3\nKGX5x0qryUk5T0SO7CMavKcxeK0notjciQIGuNPGA4klbBX3mcC+HOVN9tC4\nO9Y0J7IqDAmiU2bfh37AeN3+cFXwgCZD/WZTQ9k7urfJGNzEgP8Ku549i4HQ\nOcDb\r\n=D/Rt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHn5v1d/2hYMBHehi40MfBdGqv9SuQExzTqurWFSJvw/AiB+WFeMuPk5YNmE6cb0Vj/GNqRwFTP5ilBO3N05oW4Fsw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.4fa2daec.0_1612829979758_0.1932004281738311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-select","version":"0.21.0-canary.67f285fb.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.750e18fc7.0","@material/floating-label":"=11.0.0-canary.750e18fc7.0","@material/line-ripple":"=11.0.0-canary.750e18fc7.0","@material/list":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-floating-label":"0.21.0-canary.67f285fb.0","@material/mwc-icon":"0.21.0-canary.67f285fb.0","@material/mwc-line-ripple":"0.21.0-canary.67f285fb.0","@material/mwc-list":"0.21.0-canary.67f285fb.0","@material/mwc-menu":"0.21.0-canary.67f285fb.0","@material/mwc-notched-outline":"0.21.0-canary.67f285fb.0","@material/select":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-oEkrDu6ekv1+9rTd03Gw6ewXvGzYPPpK+yvtC8jtG9B1VBKFf9CcTWgswjMXut3SrfKIQDelLAUxEctySDWFuQ==","shasum":"00609dd18e5da5116dde8092b18dd7f5dc08be34","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.67f285fb.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdytCRA9TVsSAnZWagAAREIP/0qwyX3pmZ5tJ7HPbrlM\nzCIFEkf4kkgoYnr/s2915deJm0NsQSt636kLSMr8gzQePh7omQFdnfXv4dTK\nFt9ReRRnQfD2+2gpuXvDYzJSfzE0T4zU9d+K3qJC95EAaFxylvDgTu/k2Zho\nzXK7wB6C00NCX+oSaIH10fbkw6pZXTrva5qwM/eDZBs6RzVWAtuwge9/VwCc\n6cJ60bzTk2wodlhoh2WijH02/vlmRRqDAgG51J3ypvRUYhGxjsE0Thjq3UTE\nbspFOdiHTKeDdjib13SnB0fnVD1FwrYrWXz8V5jRhxPJibUIKyRAJKlon59l\n3U2Ah0O8QN15itmnRbhdm/1Ttpe0qZKCylCPlr82vTRl/MXFUTcc8RVNboTd\nwarV49kZiJNcyYaYc5kd5mMM6lU9yLm8H2k7m675TgEPPD9+MQ0bEHLS21UK\nNkcVpB9QV9AMNUvfUqL5aQbxOJL0QQOTr657PdObBIIMvcm8WuIRQKaFlLrm\nVWVxgDx0k+fU9ZNk8ifHQFykU1dlaRJk1UlVvV2jLWSW3PpMWCf141LV5jur\nbdnxnjJt/ZLiUdXzW99T+X57KkhsRDNHy2abvjQDmcSLVP/ombR4+4KzDfpE\nNDSMsGonh5+ippnQgZMXeQ3ZwYUEenMmtDtklJu7aUACI5qd7ysoPu8IW/L6\n/wD4\r\n=q23S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJvzDSsRlL1ybvZuXURXbH8dNO8c0jes+Tts5Mn8Z7dAiEA2gCe3gzdMrnvcFSJyR6DrGpJEN+G7skJXhWTozoNwQw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.67f285fb.0_1612831917082_0.578053784975193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-select","version":"0.21.0-canary.58cd5a70.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b62b1266d.0","@material/floating-label":"=11.0.0-canary.b62b1266d.0","@material/line-ripple":"=11.0.0-canary.b62b1266d.0","@material/list":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-floating-label":"0.21.0-canary.58cd5a70.0","@material/mwc-icon":"0.21.0-canary.58cd5a70.0","@material/mwc-line-ripple":"0.21.0-canary.58cd5a70.0","@material/mwc-list":"0.21.0-canary.58cd5a70.0","@material/mwc-menu":"0.21.0-canary.58cd5a70.0","@material/mwc-notched-outline":"0.21.0-canary.58cd5a70.0","@material/select":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-I8zvH6bYN5123qPPgiS/nBHy8Y4xdtvPtOKmJPbkeku8qFigu39r73QvQjuhvAM6nPyME8f/42203xdJ7wk7NA==","shasum":"6f41cf58010e1cdca1ede3f7b52123f42c9d49f4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.58cd5a70.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZeDCRA9TVsSAnZWagAA5DIP/iXuljCz1HZVS1HrTv2i\nyj46wnrKMCxs5cun7By/2ce/KgEikKLMqrs5hbdtsdyd7pT38zajHQg726wd\nk9GI4MsZPFo4vX8G2g3V7sSEWKRzYN8fMDDa+b+vfW84/nlHnYBOs4+Y6KOl\ngVdsArpWtaQsmtPFbpBLj+qhcLExrZKWPAYDCe9rxGTjRoVzGiGc6KiG91Ym\nCpqkBI2Y1wAowDTI3SjDtJDKI+TcjmLS7xpbTA21k+QoXjvSqPkTkQuveKDp\nhgX9fs8JiZ9hlEzZC/sQweYV8Ckp/C0FQCN09Rk883PS2VqqXEV4b9AEQRwL\nwmgZL9DcRxYHEsgpXHFqE1Jo89RVc07lPUKzVyABnIpp/r6uYpCFYO+mT4l1\nrGG4IFOm8No43HPZxv3Kq/He/FhmhkxBtXIJeQX+EBXWXqt5kjeUdE9WxPJ6\n7QTJkWvlG/t3us03ZHmHyc71+BKANsttLkFZgrPGJ9RV3VMOd+SLQd1gn6C5\nwzzQn+U47rcggUzaeug0J0tFSAGbZtf/D2eUA7Yl5Ip3oeSswJEW2DC+he+1\nGyvFDjNUktrwWCaKfZ3I67HfeP5o6DIPVdpMZBLMEdTRidTT/x5OuG0YLLM/\n1sx/S4Mqe00tF2aJ81/u4rflHlXdUdqISO1UtdDDVJWGRQKnKc4AIo1K6Teo\nJ9TV\r\n=XO0t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJMk4D/Qha+PuJckve2bpjGJkY5NrWbONgLKgAirJY9AiEAoI7ViSBROtwKyQrAHpAIezXtomQ/ioNIvhera686GmE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.58cd5a70.0_1613076354684_0.6510574141595837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-select","version":"0.21.0-canary.8107ca43.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/floating-label":"=11.0.0-canary.a6b3101fb.0","@material/line-ripple":"=11.0.0-canary.a6b3101fb.0","@material/list":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-floating-label":"0.21.0-canary.8107ca43.0","@material/mwc-icon":"0.21.0-canary.8107ca43.0","@material/mwc-line-ripple":"0.21.0-canary.8107ca43.0","@material/mwc-list":"0.21.0-canary.8107ca43.0","@material/mwc-menu":"0.21.0-canary.8107ca43.0","@material/mwc-notched-outline":"0.21.0-canary.8107ca43.0","@material/select":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-vyH0hcFsRpbIU0RzDzs40zLF3DWfeiDxgPA3MJOxK1ySVHdopR8k4Qk08a9ojF2jhAnviNtBKBn7xSaT451gzw==","shasum":"380da6cfecba201132036059c9b477186ebf1512","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.8107ca43.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb3vCRA9TVsSAnZWagAA0RMP/1+TGeGZNoPuTSy6FMg9\nTPYiRuNAVxbXGuIQMca+gqsPkMUmRNZliFDsXzcQGPqODfTNJGRlU1z+ctoG\nGgCYKxoP9wgSk7UbHycPLDdseozzHeoZQ6Kjp3jeHJBIn622g1xkw4qiBTpl\nh2/kclEhuZYtd4hEDpEyBzBuhXE4cOKBR9GZEevWHwniHPQYBvEKpM8UhYO5\nxmwMLoRCfPGGKXNG2bqIezLgu9cwOaRl1nNe52zG3W4wGqPfRQP+IoQVxFJB\nJ6/HYlYquoZF5EjhTSbs+EQunFnpdMAerdHmBOnknFtyJdi6CllklSGHvJL4\nEzPw7qnCgTn7fENlEXmXd5MkAPayR9ViqmB43bsFLCOHTMVH8WU1lSZjYjEA\nylM08uKk+ih7DaNKhUvB9ADYMQAgcYe+SPS1f+gIXsV1uqg/y+0lCI4etubw\nVMGmCO7rubi70v2FPQVZsz1vF48dspZ/sZURac73GduyfnMINGerOEqUWfV5\niN9kruEI96AB8MsiTbVrmS9+lYGhieWvrVMRh+joLPgFwpvKtKifat/raZOf\n7YzIXd6QDUhgbAw06CCnU5pOV0obHvXFXL2Yv44THLIXAtqUCW1nR2pAPJop\nM7zXcc1GhBBz3i+Vbw/Ltpqr506y4/3UMLgQ8/r2Zfk+CSCLLh56cs/4XjMW\n6UPS\r\n=cxmE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRrJrBIN68pMhKQErNIAc6OjOUICJjz4rWqUJaMK86bAiEAscUlinLMI4ZNmSlyhDt7lVtR/QrSU6g016d8ex+ROXU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.8107ca43.0_1613086190777_0.006501703060676434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-select","version":"0.21.0-canary.d35d64ef.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/floating-label":"=11.0.0-canary.a6b3101fb.0","@material/line-ripple":"=11.0.0-canary.a6b3101fb.0","@material/list":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-floating-label":"0.21.0-canary.d35d64ef.0","@material/mwc-icon":"0.21.0-canary.d35d64ef.0","@material/mwc-line-ripple":"0.21.0-canary.d35d64ef.0","@material/mwc-list":"0.21.0-canary.d35d64ef.0","@material/mwc-menu":"0.21.0-canary.d35d64ef.0","@material/mwc-notched-outline":"0.21.0-canary.d35d64ef.0","@material/select":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-lFXz9ie1mGfH4rnplfJN3XsOa8m0i4yGlJ3KvKqVV8cCLSVRI1NjxqKHbjmFK7OkbYxfuiX9Z8PB45N7aQL0hA==","shasum":"1273bf365dc9f560e1548343ed74903ae0526625","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.d35d64ef.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcE8CRA9TVsSAnZWagAAJWMP/joFu0fvPVQf9KkYKefr\nMgq3zmQd9BPc1NFYkQJsBvvaLE/R4AJ1WZPIrHl0bXzqD4U0fWyAUXvv50JU\nq8or6i3tkBPFK2nhPMD3dF4OveCVg1WdXVMYt+wUamYIBcLkRDtlJr4zxjdq\n5S/k7Dg3m6ttFMaz+f1W7b3CmdOHffXCrKvGt6Qttd5JUqfZ9fgmQE3IjyEi\nhe/TaO5J9zrfEu37Ic/sulGNUV6lf43LW7WuY+VfINn5bhqnV11xMYh2wLw7\nOOdyuavJ5riIufnzP9wEWhiBHwM9sG7NS/LvzgHDINvnSYE/rNfkvegW/sl9\nnsvpmiPrFiADwRvHcWskPeLbLwBGLSKqnU62piPtrzs89H5rpJSIOVdvSAvj\nXTHDwcfODDd+zeQE2NWA2xNIJgoCCKfveXkbJSHf/zWW2lRxcJThS+Mo5F4K\nqK1b0Y9edcihSfVM3DULt2BrPXtvLto6fTJMZiHP5eRixmP1s05mL+ILVXo/\nIIQIp3JSNHlg1dDXTIkB3/zyoruHwqcyYmj+dXtpGlaQXbStOaZ5WwFm81WM\nobwSSg42Qomihs6ZPDfQRCqUm92OcWsdWl+4lU9/vZJsWlk9K9kJVdCaxsHy\nooK7UUaM/ZF9kaKmOHn+1iPFuLIj+qEwzx/4YHo7gloa/CM8cCcMGTBKSYCG\nb5h5\r\n=eyXq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJvl8vO8JaSSSDPXqHC9BdjwDN9oCPRfvli2Nadj9l0wIgA7HZqoZmCJYGdCJnEADqyRLXNGGBYCCezwn33CVVJGc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.d35d64ef.0_1613087035626_0.7894272986760393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-select","version":"0.21.0-canary.78bcf058.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/floating-label":"=11.0.0-canary.a6b3101fb.0","@material/line-ripple":"=11.0.0-canary.a6b3101fb.0","@material/list":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-floating-label":"0.21.0-canary.78bcf058.0","@material/mwc-icon":"0.21.0-canary.78bcf058.0","@material/mwc-line-ripple":"0.21.0-canary.78bcf058.0","@material/mwc-list":"0.21.0-canary.78bcf058.0","@material/mwc-menu":"0.21.0-canary.78bcf058.0","@material/mwc-notched-outline":"0.21.0-canary.78bcf058.0","@material/select":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-rkG3vtDYkf13ylHIYm1jHBGqD+P/I+T5lelPP3NDnmGqe1lFEPCMhpnPbkSJAjBiOuhE8utxlz4LJU/XO2KBwA==","shasum":"f23ee85ac039b9a64a5618ef697f6c2ef2580eaa","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.78bcf058.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdCECRA9TVsSAnZWagAA1XkQAIzvQPDp0pkDgcfxVIJX\nGVNDy0frKpnAyF9GbOrJmlL8GjHCsgMwbLexxQk4hi+29eyyYQUcH3vuovgZ\nH1Rcbh0dwi41VgAJGQ49gGaddsMqN2HlltJzCJOtPWimT5qmyN//iFgJzNYS\nB79kYGjMQcW4RPmiuSIDho6PSKJ7zg8H2je1oLMuBKz4p4GrKuie3qHzt8Fc\n9wp5fEWq0y6XpC1O9RCtjFei9TJKX+tzOY4b1uhxxkkaL/ySIV1cmePi1dUu\nB16QpNQ7nSTv226lyaCM0jhWthXtSlziB/+qxVxB7LDFEjON5ZQqigE+Lorx\nraK3fiojYwYXipYkeDhZBqnmc8S22konADPAAgsTSesyQbklAShC0c7mSPZt\nKMZu06hU3QOuyr6a5dkQPmAtei9UzGWswc7TFTLBLJRA3J1him4ZSAo4iTwR\nwtPsiYAKDm4WbZ1EYKK/H/Iu3W+t4tGQi6A6Eab8jpssvDNpuE3gf/Fs1L34\nNpeuz1lWOAipZt7C75gWbfIkoNa26MtI3Rg4wdjBA9mOX83OZ4KB5mjJNU2I\nzrLa7z6j2jMui5/42SonPAqGx3wdeYmjTC57mQSPLMkP3xTebEt+hpaY4iGj\nHFBYosi9nSdbqYNmGIb8A1bJ1H9dbIaEPSUXoqY2Xkx0aF8JNrQmINEgXAfW\nhP19\r\n=Gdc/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGFOnLSJgFEj1Yl9CKjmbS5W3Yv2uEuPVzOtd3I0x8j1AiEAjB9unmquvnkeYVyD6sh0KvHBYNt/215AxzZzGPTR01M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.78bcf058.0_1613090947740_0.779411253165982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-select","version":"0.21.0-canary.0c6908fd.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.ed88df700.0","@material/floating-label":"=11.0.0-canary.ed88df700.0","@material/line-ripple":"=11.0.0-canary.ed88df700.0","@material/list":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-floating-label":"0.21.0-canary.0c6908fd.0","@material/mwc-icon":"0.21.0-canary.0c6908fd.0","@material/mwc-line-ripple":"0.21.0-canary.0c6908fd.0","@material/mwc-list":"0.21.0-canary.0c6908fd.0","@material/mwc-menu":"0.21.0-canary.0c6908fd.0","@material/mwc-notched-outline":"0.21.0-canary.0c6908fd.0","@material/select":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-q912WAaisoeTcp4LcEHmSUueEXZX9eSThfgJcQsBGnJ9alzg1SwKWj3dhaH5q3TgRoyvqIN4BpNGDsZYA2v+pQ==","shasum":"c968bd69cf745c9386c11d482daa711da53c2da8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.0c6908fd.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdkSCRA9TVsSAnZWagAAhWIP/07f0d/H3CeJ9KhOVlLj\nJ2NU3bpdGeoE/eDOIv0IBpJKjpGureceszyAnlS+5biAsJmUjmlXEqwek+N6\neKgQ9rJ0cLD3A7AumjgCsYGn861QGgcsKilQh/3aruxlCkR1mkg5Bcw7gbO6\nWF+hfcBiZ7jUYV6jz2SP/Oxu4IJLh3TxWebwcf3+WoQDVOHCd6Zy3Ro/zd+9\ndwnvm7qTiC/1KHPdX3oDhrcRFgIIiwoR1DaAwVdIhx8KL5C8CiQ+hbb0kEFD\nNdAoP6W6gK2bAlZWngXbvs2nVoxCkvLTUBjk9RZrcGI4CVanvaWFvzTLtCX4\nD5NYzJm+PrcOAl7hJpj3nV8GadiMILxPtJRtotQvBkAxWdtkksALbuSIrwWI\nRsDux5nvxnjtxJOnr8uo82P6j+eHv/vEBGuyDW6evtOLLWPHu2h/d3yYyCpT\nqnsUjuFOhIpcO5V3E/mTil0t1YLgmhIPPuIuxAy2Qng/RuqdOmpSbR6QTbLP\nw60TCGSC9bQTnS0aqWr9JSCkiQp1OKzPajnoNGLj0gm2sh5Ds0eFOJLTuwYo\neCVHBaNMbgHlidyUCemn/cRPQe2qRzeb46CYpcDyEgUxwfkHPyGXQIziyiX/\nwiBhP+VHFWsWDW+Jbr78fQN9YrWWJo6inK+o/mG4LjpslOBwRJqIA0ai1cEq\n7yBp\r\n=LHU2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANEHFNQBavU9TkF0K2wa5AZY/+m4N+cNpWb1/YPzTu4AiAHIy63Nq1iqsmEe7BGJLSzY6q/zILDgY4cOQHAz1lmkg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.0c6908fd.0_1613093137986_0.3755535991946122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-select","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.71fe9a067.0","@material/floating-label":"=11.0.0-canary.71fe9a067.0","@material/line-ripple":"=11.0.0-canary.71fe9a067.0","@material/list":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-floating-label":"0.21.0-canary.f1f34ee0.0","@material/mwc-icon":"0.21.0-canary.f1f34ee0.0","@material/mwc-line-ripple":"0.21.0-canary.f1f34ee0.0","@material/mwc-list":"0.21.0-canary.f1f34ee0.0","@material/mwc-menu":"0.21.0-canary.f1f34ee0.0","@material/mwc-notched-outline":"0.21.0-canary.f1f34ee0.0","@material/select":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-dmeeZwdbctM3NArn8XeU29pRZxuc/wn5NytVQv484Fp0KS+VElKZvBNrz7UbvDu4i3E407ASqK8o9T8KkA5m1g==","shasum":"c6c8785364904fbbd0e9c5ff66fc3bc86bc6af30","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.f1f34ee0.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKuCRA9TVsSAnZWagAACqIP/1B6Zerbs0YQs1W/mvEr\nTmaQstG5ZUfqNklt1uAcKGSyenW3Zw+463CEiDnO/YbKb8TRQtdYFEatjFA4\n+nrSztdVbJtsn9RKilJ4eTNWQ4hrczlcs+dAhYVBXlQloWcPUPEhVMnr7xVu\nlTmTx8JYKAzzseGsaU+j9kSvTVwlYfkSVRNUNJ2BIeTh4xuXTvDX4sn+QGgZ\negt3CTz/+n0nXhNROeYx+llrEUuEwYWjTHTBiu7C7kqtiaq9AN6fiL05IN+O\nJEWI5ZRQsiE3eGjTrSEUnfoPcQGDBXyHNRjkg+iHwM3SZ1zwJsowB2e5S8vT\nM13SXfCi4W3ie6P2aJ7/61nNw3h2W68gl/jJQLpAndI81kWFO+CtFpRmBAlB\n52fWDyf8cpDJDt532JrhJVoTuvCkpq6t/DIvEyI8Fg3Q3HB2duoamzEgE8kJ\nGULXGqkkcm8eB0VtI7A5w3zf6eKFAw7wT7wSwi0FmoYWkUwc9z423qdY8v0x\n6tKS+sbKioXN7CUhSzS5JcYZT9Z+ZBcMvrP4fxt9ziqxcY0zPBZsPFvVZAuG\nE91feJfHdgQhfJbeKwwmQQowcxf3BDF6syAZQJ6ohNBNoPnZaETB0uAMTzXw\nodjTSEWjR6JTs+udGBy9FycJ8gUQNvWXHzQXZjbi17jghXzymmMBB4+m/dYw\n2nG1\r\n=QatI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERi34wXXb4EYpNW96HjgmxK2WpePze/sAbuXaiTWIUCAiAw/5C1aQYdif4Hdrf/35jKZZ00IBI3sbbYGGSewb3CIg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.f1f34ee0.0_1613161133753_0.6902355663601933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-select","version":"0.21.0-canary.d84df029.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0fd56a86b.0","@material/floating-label":"=11.0.0-canary.0fd56a86b.0","@material/line-ripple":"=11.0.0-canary.0fd56a86b.0","@material/list":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-floating-label":"0.21.0-canary.d84df029.0","@material/mwc-icon":"0.21.0-canary.d84df029.0","@material/mwc-line-ripple":"0.21.0-canary.d84df029.0","@material/mwc-list":"0.21.0-canary.d84df029.0","@material/mwc-menu":"0.21.0-canary.d84df029.0","@material/mwc-notched-outline":"0.21.0-canary.d84df029.0","@material/select":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-mukUjVNVAmDbyIYQuY3ZXDPRW2KsGcCOiZ9DMgxf+PNaKbwnerjcVTPHp4VNc3dV/BLmSphzC1i4aPTuxq5qxQ==","shasum":"e95b4652c8e511bce8aeb696e43cf1a28cd34823","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.d84df029.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBhXCRA9TVsSAnZWagAAqCIQAI+eepJBxtsEwJPzpNPA\nE5G//KqhBuDCD2xkM0CznQGrc2vdTA13oxQ9zg04TwPiWIkOc76Z/zMfOp/p\ncGo1CfHVPuGvbtOifCzPWj6sTNUEeOwj0t+0WI+BjdvrhkDUFs8UFGrVWu/I\nsokdvZJv7F6Zqhmyfm6f5VNwRtfUhwoPHP/4SgLKv0EeMKrRt9Isl9qBzFTT\nMGaeCxC30fuAQ2YhgTDpKGQn+TanErr/CFLTFHpF8oT+Yx95VjXeeNM0rdRJ\nNLu0hSopJy4HdREHBV9lCux0mHVDAGNOTgyHKLcveBLlcts5wWYg7D/SceEy\neC+O+Wz1DXdKMSBumL24qudcWMmhhiZie+NoKq9JiNZSd6ledzSlMWOqxFve\nLzqu57+3ngvbpLeUW9OFD+b5bsze2VuYB1d9Ld91PHDeMEnh9akxxXR2eMfe\nrHtld3mA2yS/YALNd+KEb/+khnhxmkH6lUcvkeH2SiKmAbVgCCeMtSMnxQsM\nEawVOu0kcFHBakE+iI2Li7LfQYYnJfjryxj66uVlqwRN7w4/YMrmXcb9xPqG\nKkzhMGNQ7aOyQEn5E+wUdudC7SGqiPhXo9/2sPjNY+E85oRuMfH2OF7g8oj2\nzi1hbeOmQVrEZg0ZpAcoaPFrK+7DI8gZ3My5kxLdgJPcaWWLfKD15h6LJyzV\ncIJS\r\n=Sgko\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICEcAYI7aphGOKq0doW3u+fAr/i8nEDB/pOMLEcKfjWnAiEArlQXbJRx0+/1E85n0WzfqEyXd6FbLJbmrUFfUY1gXbE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.d84df029.0_1613502551261_0.09509913392664604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-select","version":"0.21.0-canary.c525f471.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.f9cac96cc.0","@material/floating-label":"=11.0.0-canary.f9cac96cc.0","@material/line-ripple":"=11.0.0-canary.f9cac96cc.0","@material/list":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-floating-label":"0.21.0-canary.c525f471.0","@material/mwc-icon":"0.21.0-canary.c525f471.0","@material/mwc-line-ripple":"0.21.0-canary.c525f471.0","@material/mwc-list":"0.21.0-canary.c525f471.0","@material/mwc-menu":"0.21.0-canary.c525f471.0","@material/mwc-notched-outline":"0.21.0-canary.c525f471.0","@material/select":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-jKiZ36s9cRUKAiNMUjcAEr16EfyxkONQH3cZuIe6RmlCZtyvuKqX97g0BlGf9gGkdEI121telghXyNRdKK5hUw==","shasum":"f874c7ae61aea33e85b56bb913b89a93e7a23819","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.c525f471.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYKCCRA9TVsSAnZWagAAB5QQAKFcIyF5eOcUbXXR6ywG\ni43bAmX8hmc5cEclT5Wj6UNKrR8Lb6UJcPNE9Spb0Yh/9bHzFw7MQfmEuBLZ\n5b+iMS3OZnsrrcqTKAZ6teDRF2QJ5bUrv2TW9iEfsne22AvXZmvIHWuXP8UV\nJ0zkV367fwgePM1MCaatICBLFp6PusLd/1/icnEHD04PF3/+OhhbDaKtxawC\nwx/N/ln/FASlkm2COcq4oAzLQbIlLeB92oQWEGtbXDweSwAC04a8tw5BcDGB\nqhBC1+zDNSgqqaFlrWfzDS8hfcKSxYIHsbKDgZcEU0W9deE82dALSJLCfIcK\n94nmUxFA7HY9NS9G10Z9CW5wQr/LEQ56BcgKBU79ESbNJBfSvERB9uY5eXFC\nLDdSlsvgyATPo20ZKGqn3pMyzHN/oVzlXAABYoeekC8e2GzAXzR0yhogllpc\n54R/ZjbETWCXAwzFNDGfQDpDOC1MUKYPZJvlWjd2igVKaY4n/ZPcUk7ZSIa2\nCQ/NIUkRD8M5FhPJALOmx0LoLPWdLsnEepI/GchGrbBwcLN0jtgLFNk2Morv\nUetlG5Xs4N4ViCCZpgkGcneJ7WO2HyKuUnIkn0k42GwKPMUMI2tIRY1+j2HU\nmZWA6LB+xgbkfI0CtVIEgf4qS+y2ENbAO3kXXtEXzYB0hePi1Ful+0mbLlQW\npKn8\r\n=phdh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBs1UHev+ejq+gFtFIDccIldRC1qOjM3EyxH16tbVW/xAiAs77bw9fytbuCKUuMYjvdR1hQVRt7oqx0zvTgUsrNojQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.c525f471.0_1613595266221_0.47112694878248496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-select","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.f9cac96cc.0","@material/floating-label":"=11.0.0-canary.f9cac96cc.0","@material/line-ripple":"=11.0.0-canary.f9cac96cc.0","@material/list":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-floating-label":"0.21.0-canary.ba7a1b35.0","@material/mwc-icon":"0.21.0-canary.ba7a1b35.0","@material/mwc-line-ripple":"0.21.0-canary.ba7a1b35.0","@material/mwc-list":"0.21.0-canary.ba7a1b35.0","@material/mwc-menu":"0.21.0-canary.ba7a1b35.0","@material/mwc-notched-outline":"0.21.0-canary.ba7a1b35.0","@material/select":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Gzf7TLns4ilLeUvJU2GNA6XKiRp3ucsjbF4T5GWZgrfwzV1jJ+GdWy1BYsne36yR6ZinI8M3tGZCY7MSKfnjsQ==","shasum":"25f0897e7fa0a7c49947ff59d8e09301fe9d67ba","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.ba7a1b35.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwL/CRA9TVsSAnZWagAAkRUP/1FX10m3IhkxKzZXFJNP\ncoEVg1vUfRipNt8dtz+C+myZpM0Kf9k0GoHqAlyJ7NOiOXtfVJLukM1J9paG\nDKPSY6jeZjiaWgcStmJ//jHZwg+10xZM6I2SAPl+40M96KCjTWIaYJcjYC6t\n0S+f02kIs+FICdSROxKAGbofsUNvGn31OEWH6x9u9WEpM5ze2nObM3qLs6fJ\nPz+3eppsN1eQh1X1g182K5wUtvT8zOoMxfClKYsxwfceQrDoqm1y4K+N31Ey\nFT5HS3Qv5mGptzv3vKf4ez8QjwHupatwL9EuoY5Uit4n0fA+cfWMGbQFRJnD\nShKv6J3phLethV8a0uXK6c7eTLuLCwQfVtBKFemTbLZnc4dJZf1HM/77XeUI\npi9En5QM1g3ylVeUlG1aQGz9tO4Qjbv800hudkJH26/kvHcdF4JBbrKih1Bh\nYBH3jRYs9TQfUz0l6qqg/ulEBDCHT611ghoIzBdSCgNDssZ8LyWFyDrO3fJD\nmJ3rfYTSfWFGw3054gDDixunDbTV4zVwNPsNgZzwm2jCIKHWGN3of/tGitQk\nHazM8iAIG5yrOpMQ5kRRF29oLAOya8Dec9sHoOAxw75HCNzzBE0K56T3G9C8\nOycpNrvIF/5PBy8mgUrESVt4DEV6XRVKmtlQ5OpuOKez3Y2fEl8tbAv0eyx6\nZ1UA\r\n=QL+m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqx0t6GH8kJLt2cOD/uHYsVqaETTLkqU4Oj+WoeUsTrAiAkjSnEeqoO9CdJPnI6NIgg8W4S5ebqGK/6QGvOggnHlQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.ba7a1b35.0_1613693694753_0.5731895935718856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-select","version":"0.21.0-canary.9a566dda.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-floating-label":"0.21.0-canary.9a566dda.0","@material/mwc-icon":"0.21.0-canary.9a566dda.0","@material/mwc-line-ripple":"0.21.0-canary.9a566dda.0","@material/mwc-list":"0.21.0-canary.9a566dda.0","@material/mwc-menu":"0.21.0-canary.9a566dda.0","@material/mwc-notched-outline":"0.21.0-canary.9a566dda.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-GvsoAAgsCiqO3BOKCh4eZ+TCKtvTiWzEnHQJLC5a1wkoIju1XsuIYtp6ifP4P0JG+3VRxpoQQXFHVH2L/pAs6w==","shasum":"598559c3de0fbc7c984bf59a568ff4902e012a05","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.9a566dda.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAXGCRA9TVsSAnZWagAAwvQP/2IYytEpjRc3KkT803Mp\n8MVqqZw3dmLJa6nq6v3XxL0czMgf/KhD81Hhnw8+NO1XcEmyH/19h9ZHHAJF\n/9a96IUwozSduoGVxnq/9ovttGLEBGSQ06UcoOx2cfWgQh7bk6Qllk0FBQrT\nfnZhdPUIvUiFglSXahpI/EID+tXsPoENCvtu6YSDJuAG0KxdKMzJ6qMqeCIB\nZLu9w/DzM0wTrsK1URqd1N+MVWKNSlQwNJyscgkopyVVW5Y3my5ZjH6GjcR6\n745Hupx4ZZtdbOj+6SILLKlNivcmQf2MJ3sx6aAYYfoFB0LAqt7XkrazHDzh\nGAF62lDBQoM6dHQq3qIKsjVizRVGdw8adt3TM1OthsAH73SRLcK77gypALYr\nZxTJIbZmX+qhM8EtD1/YjsipcPHnzh9oAKXIJqo45lJvyXUc3qxAGtQwhztZ\nZhYESrRxYlpQX7bU3Kq7tk3wu+i1MntzL+GMgKtwnn6zc6Ip3CQSbpWWXJUk\n7u1IhHvoChaZP9BYbo7kvTchyXz49juEmgNpgkDkRwhxTI3vImL3Ot0kgjNc\nPBrYRiXzVCcAEznLQrIXFQQ0xh+s7eM6eRvowadVmz4xjW5MhVWpAZvmSvTR\nNJTEiY9l+Y2FYH9phrsnsoS+NAfgpREzCccXMhT14Rvyx/WJuSzAV1SFRStP\neMZl\r\n=Ossp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlQGwUsj+gjBf1SnWzX3sJoOpyoObJxwUWxZnQ2PODpwIhAIvafbnhVjqvYJ5B0uvSBoTSTM863QV+rsdYZ/MTbNGq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.9a566dda.0_1613759942217_0.480057604722117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-select","version":"0.21.0-canary.55addb8c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-floating-label":"0.21.0-canary.55addb8c.0","@material/mwc-icon":"0.21.0-canary.55addb8c.0","@material/mwc-line-ripple":"0.21.0-canary.55addb8c.0","@material/mwc-list":"0.21.0-canary.55addb8c.0","@material/mwc-menu":"0.21.0-canary.55addb8c.0","@material/mwc-notched-outline":"0.21.0-canary.55addb8c.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-1ndWeav00qaAP2TejM9Je4fLkpFQml0Aw+ULZrdDg9RR9TqmtvA3aaOK/qH2GarDUHlnF490hPslw6Ph6MKePg==","shasum":"ee1dc1c20502c51d88fa30d45669aa07d87daa09","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.55addb8c.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDWZCRA9TVsSAnZWagAAu08QAIel97E6xAoMisP00ZLc\nuBr7Th2utFUErdF/aq51jc4LgIUwlOXxaj1Rg0KE+JlWNiOhcZNvEu26q5j3\n+wGqTAW0dPvYrGL0ju9MDF3rSK/Ow/MM7p7mkGnxkGl1MPnQrGIZmGPJXD3m\n9YrMuOU5BhXBStWEax+eR5pyqfy+8pTinH6y4Y1XVbrP26iFRjJpfSmQqWDN\nta7SxEHnbHlzJT5NqUOEM2n4P704LCXv3L0/NVV7hZp/+pMHs57kg6NtrE6l\nMSjQCbQ/q0fwX2XMsLvGoZNsRhRxUd86A6AT0AT7cwN7sDLCxv41VtpGSK6R\nFTx77cwVHBfXZXXt6BJMR1b481U6Fr+lqv9FZcxCNpu/AxH3GbZ9QDl3mJUc\nGldGbcZNU2D7TqyhGsHJosvFtU0gE+wsiCLXDcOg3p7N6zDB3q3sOYox0pyD\nz1Ith2FoDWsAjHjw/w96Ra7XOkDZqYO63LE7I8DCg2L+lUjiC0R8cCBGvIh9\nErDXQTSbQW6bZKpfH18pJzEkt4cl/0oAiP1CQ7JJ+auui+yWb6hOswO1iXUm\nWKEMFeZnP1lDbiQtJOyYVo/hLRgtXui/nzDS1hVLbDmWRcyNCegsnxGRCV8e\nPIBfBt9FFzYfYnTFunaSajRFVpqNTLDPfGdvPbmgSQ0qnlFK/5kGjldHYODY\n50SM\r\n=mfX3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDmWYJOxs+xJgVMCyra/Dd4gqWKLrenoTGP7mQgvUPxaAiAL06SRZ1oSKMP+luaXKikJr0C/atRofoP8+U7M4llnFw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.55addb8c.0_1613772184711_0.15648726864395668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-floating-label":"0.21.0-canary.85dd5e9b.0","@material/mwc-icon":"0.21.0-canary.85dd5e9b.0","@material/mwc-line-ripple":"0.21.0-canary.85dd5e9b.0","@material/mwc-list":"0.21.0-canary.85dd5e9b.0","@material/mwc-menu":"0.21.0-canary.85dd5e9b.0","@material/mwc-notched-outline":"0.21.0-canary.85dd5e9b.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-265ap/sofJT0ibO0NFlY9OkT8f+AFPcCcM6PgGLFvfW2uLWQwbMMVSnpGxzOtUyPYEZA45hrp3gONAUe2F06bw==","shasum":"de921591c382730984ec45ba2e5e1b0f2ae234b4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.85dd5e9b.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGZhCRA9TVsSAnZWagAA9ogP/1RFqIW5QUgK9pIeJzER\n1+F942kzQRBTCuH3YiD4IyUCD0jbqbxvlfiBPWIzOkDQcaz2CC9ypT+Tvlrn\nq5XpzyNgNxbQkqt1GvhL5vcuGaRyqXCJGNDg85zYy5AiFEj8ZvNHhFWVlSi7\n6pSOEzGFncFU9A70O3/z+/c7fW6qWmt5QWB30ca+fvnS5b+1/f26GcB/pinC\nF5Y8RU2i0m5/OogOHYEV0fWsxWy+p9+Q+Y94/zK4blm+JDrL3ZLdZBrWTVSE\n41xS8snCZBWixQE0ZUJyNDoih4is1RRX4NfS2t6AWPQaWoOEpe18LpcEQI2/\n/iQkwBs9g7QKp80cvD+pU0G8tJv6a/EjhHMJJFI+4VB2kmONSREm9TPy+Dop\nHB9zPypCb8vf8fwtpvNXSc1OmT4ZVJITSLP50GUt5k7iKnuXY/EFTTHfMU5P\nqiJwIjUmnSXmJUCBd3Lqp/XAODxPeW/Octj4BcrtUYRdGm0g/tqqFJPBhiI6\nk0lkijRQE6aWANoAKlpPrZM47CY31+NPN6rHjB5AXLALsol57rcC1kssk62t\n+rKNySIvqsF9YfteBzRF2bn+zpk+Tnuyn1aZMn1vMKPdB/U0IU+KGUMm+hBe\nkPLZcHkeTLzXHlmW/sTPv3rKW2fHu6BA6Fo/6C5D/VXKnhxfzwRXsZV15fO9\nypGT\r\n=2FAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkWbTOfULzoPSpkTPuKcbzglUrDKd1ftnur1hgjKQESAIhANghuej1ZtaHwkuyT5Vi7mbKTFdiJgnCGRU5nU+UryQO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.85dd5e9b.0_1614046816324_0.1118407280065914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-select","version":"0.21.0-canary.aa3e078e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-floating-label":"0.21.0-canary.aa3e078e.0","@material/mwc-icon":"0.21.0-canary.aa3e078e.0","@material/mwc-line-ripple":"0.21.0-canary.aa3e078e.0","@material/mwc-list":"0.21.0-canary.aa3e078e.0","@material/mwc-menu":"0.21.0-canary.aa3e078e.0","@material/mwc-notched-outline":"0.21.0-canary.aa3e078e.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-hFYW6Lp0edjextEcWZHpYRUwTmvHonasvjK9jRvLxxubvoybRdoPgxSJVL8pZ08XLyOFh3PvyLbeus6SO1Y93w==","shasum":"c495ebe8508e9fd06804c0f651b7f1e8c39aea8f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.aa3e078e.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNThVCRA9TVsSAnZWagAAaGwP/AlorPAyPnj6X1xk9329\nXbi9bLMBsGbEKULQHriuoVPd1sZjT2HiYVQ+85igJ4PgnmagfY4WJiNr0hTO\nkQpW43qzDjWMGdi3HtJVLM80/+kLqfdL+KY5ukt4ToKnOxFXV6IkzVMYczVo\nLxe2FnOVzHqEu9i49nC7elvBF1icHp28w6OmG7SpPkULFsU20tKFK1jxuC0+\n0HhqmWijcxbHMwFBZ+cM/Vky/ZIL0qKPTD2EtbeWDCod4uZTmp/wr9IY3f3+\nlTkdbsK3xNLHxZA9rGDDSLlIpkKO6p0AtDB/sFmYfv6DmhSKedYCSgepcPKV\nCWzORN/XJvD9vaKmhuX6Ha3U9n4KAoWKlNRFyJ0osETs3RnMbp5M4TObMxyj\nkPQcCXxp5KuJrmpongOfQrv3JZ78Z5sNVqkMPP0YYcnCjti1gUhSx+3S33h9\nwDbYhf44EYFdLDnrha4x7/ZM7OKOv6ZNQtph2KDowHQMty2AxdfoXD1eEVDd\npc1KwCgdIPZcFcTs5prW0qyGjbSWuvfA4QuZ/MQPHUn2Gc1ZWIRm3nCeR7EL\nUb1JvWS2Q1WTbLakWA4ItlM9NZEJRgGf6fqJtG/aX1e0tFGYGnJYYXZay7Dw\np0/Sf8jq53rP2b/JpsEZn56rDBCZhjbUr3QzO8WB3BDJyBNYJNzUuPOFaLbD\ndyZo\r\n=4PQ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBu79yuFe3w1AZrqKNNgCllSTMQd2iyK6dGuNwCvEYzAiAg40dslfCQONXPoZhvnF7pnyxGqZQGSwH8Y4J6/9HUjg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.aa3e078e.0_1614100564820_0.07524588886985617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-select","version":"0.21.0-canary.dccd254e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-floating-label":"0.21.0-canary.dccd254e.0","@material/mwc-icon":"0.21.0-canary.dccd254e.0","@material/mwc-line-ripple":"0.21.0-canary.dccd254e.0","@material/mwc-list":"0.21.0-canary.dccd254e.0","@material/mwc-menu":"0.21.0-canary.dccd254e.0","@material/mwc-notched-outline":"0.21.0-canary.dccd254e.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-GwIUSbjGT9ORq8KStoQZyFSbw/Xurv2dVOT16HzTWDQRNqNHk8GE8U+AOoj6SWXIa3JAgQLszBhV1iM6KqpDsw==","shasum":"9bbba14c5287e19d781a8862e573c61279c8b80a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.dccd254e.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWPpCRA9TVsSAnZWagAAZ9QP/1ELTJeGScZKT9G3Lulv\nS4LZ+EsY9L7Xm+PMBOZ1uHfRxtdUtyk4Q7IXlUK8ZcBg++8kRar1Oqr19jaJ\nmm7nztAGhRaRSU+M0yPvJAyBByVsKLj6pnASY0WLJY4PyDsIaLX0E3oZEC9F\npdF23/TI3HYUi5XcTD8BkOEFgry6wnQW66q9++47HG61/tSe6vAun6zvVm7U\nr4gsIrW79JkRURuueNnZcn1DXrMtMmp1bWhiTpZVG+SeRHCEDwzH7f92XYyA\nWJ0ek8T5aivz27aK2ntp5lDtbhwxbXqHIra7OBv97SKhbE4JURQfFZ/lCiUZ\ncqwBpDTewts3dCtbEI3cKZnDvIj3iLbdBq+fy0ns9785p/0s745RL/FQxCf/\nCPBDkblwuPZweyGMOuuH1/q5gX8z0x2cjUJK+iJaEujqY+01YH1j28kETK+h\nCK1ZMJLsalLcI2gMIP1huAEqqVhDGgxM1Fabb6mlLaj6/ufWeI/1sieSpb95\nFqlEXauK4ExOmjWCiGdpCOMBP265WiGDzICKE7wVIo07/TNBblYYmIqtaZKG\ncfxMGu0qdl+aPl5hauzEgdoSaaJCEWNWbGNZHZf5THb6yHYKN/y7jt9E6zdZ\n7/ooWMLvmVVYcoOZxRyJARKQzwcuMn/6kZXgHnd4/YrYv47WyND1ks8lW/Qg\n6tfJ\r\n=TtCV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGATtwUbH6AIPcXQ/B+7zhjBLpz8QhfYPa71FZ4H3wg5AiAh2fq9h4BOxGW5pOWXk7Odsj/M+lzLRN3yZ9bkMoPX3Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.dccd254e.0_1614373864844_0.010698161288465124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-select","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-floating-label":"0.21.0-canary.7dd1a27d.0","@material/mwc-icon":"0.21.0-canary.7dd1a27d.0","@material/mwc-line-ripple":"0.21.0-canary.7dd1a27d.0","@material/mwc-list":"0.21.0-canary.7dd1a27d.0","@material/mwc-menu":"0.21.0-canary.7dd1a27d.0","@material/mwc-notched-outline":"0.21.0-canary.7dd1a27d.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-IXXuaJM9lDER4OcQjACcL17oWPlzXOeRQ6eHYqkms4Lgihz3u47jYxQB647Ejo0wahGvqfNwMahueiQfregM1Q==","shasum":"723c264561b48cc92fe71604432fc3e81ca86cd9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.7dd1a27d.0.tgz","fileCount":13,"unpackedSize":203924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWRVCRA9TVsSAnZWagAAE2gP/0eh/Bynrk+B3+MNgzqe\nHCCSTV7PW/QsRHtpYU846pbxTxN69+jCKZ88IQb6V+5fg7EKJ7xGRZ+ek5hc\nu6VksMu+lfMB6Y6T49S1CfTE9tm5t61OQKN3DREKRY128fDzpWKlpJEdwmMk\nZGJu+j9+qU1PVVYpc8JnkHOnrwl8v9Wxy3kP62N0/hrKflZUTv/sZ4qjWvt7\nj2F22TmMiAmp6EziJVHzdGUvykzUCUAllT3TtNh2KAUa1irDmkS4d6bLUSdL\nC5Q3af8mn8ZOm5VyeyUwuaa1O5bUTnL0eFrxiXwFZi4JrxaU0l+wnskveq+d\ncillLZ4xvbF6ZdNAVBdNOT96mjg6rAPdiDNb6WBuhkROwkbeoMwTVeJ7Dayr\nl5R0hhBnfjwYb1+AjbHSfYAZld9Urgq5ma5hP/bxv7cFNnP4A3H1mgT21juh\nVgoAaxWJLklSC9QzRqtkX2eeOssfW2w3XEtl4B64VQIfwMa1y+5eDQaAKr/d\n6T6DqV4mnVJAApyznPRxGt5gPQnBU7Nw59jlKCee5AVQjv2AkxCOthr/2IZk\nlNJTQZs4XGUbL/hU3SuFPafJpmJmIhZbdmXXtk7a/iD9ZJfRnzRhIMgfAeLo\ncuZmoc0z8h+2YtOph2KV5e8YqdXD8TjfxKBfXIZ7o2dhXU4mrHvb13jK6ySA\nSOOH\r\n=vrDZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDjsaehvy1A0Bp2wtbusXfae7jrDKJfCh1IAZ3yzcxpgIgOwJ6mHrbSt9q9DVsPe6fy8KVqIauuvMigWw9w/4R4Wc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.7dd1a27d.0_1614636116854_0.35341147877925705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-select","version":"0.21.0-canary.12574572.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-floating-label":"0.21.0-canary.12574572.0","@material/mwc-icon":"0.21.0-canary.12574572.0","@material/mwc-line-ripple":"0.21.0-canary.12574572.0","@material/mwc-list":"0.21.0-canary.12574572.0","@material/mwc-menu":"0.21.0-canary.12574572.0","@material/mwc-notched-outline":"0.21.0-canary.12574572.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-7xIq7sS64+Xpip4BS5iY+4npl/gYBGUvL/4bK2ZHi9tXtS/aucP+hfOa6h8h17z+soZPgSn+p+7BMIByZ1ghhg==","shasum":"ed58381fdd092862a5d89915827bb51d003fdeaa","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.12574572.0.tgz","fileCount":13,"unpackedSize":203942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqBeCRA9TVsSAnZWagAAJqIP/0lGxdhx+6rdPsm6Fpjh\nqCpp4IQj+Xd0UDHpGvDqLqBiIYDAcdQpsspOJxQJ0wp7cIaKRIY3arfev45j\n9UOmB5Pcjvbh8ijhFhOTfcbjAM81GSZptDhKC3wDtGQVXGD1X0Zdkv0dgOKa\nxt8CgUudDGTEjgpWSRHjhkqBlEqGmxT8Q8deZIawxtPcC04fAlDHaxq3Xx8x\nyt5mVJPgR9BuRut0WT5G5E4cKC2Y2W2y0WyIJl+3Xrk7/6lhhtEu7W93uPqJ\nb7uyJyoyz2z00oielhT9cefTBUvm5rIqeyWi9bc0O3xTAsIu1aP2K5scZAme\nPD++EycR74Vmh+qPpKPUJGRL4DhfeXCfylnwv3iZ167tXq+00TqYoRvRlcpd\nuqDY2GXShcCnl52yTeZWlsLcYcDrQ861odcVqkAZacnm9ahKmOyCtewhxrWm\n5IHbSIiEua4HTffwrkCrE23IIxOnidojbnz+fq/8dAbHYBWOJgeJouayQ/y3\nyQfyAWMiQSHVcHC1B7JAiZk3O+CSy1uuHwh91Uo60DnyliPuNoOgchf/32Ix\ng7xZ39dkhnH+OLcsLO+6W6r8PqExzdi4jN+06L7IAeTHtl2iO5ZlWFtlqdXM\nkKKGlX8O3hyeRJLWLMY+FyVmD/NSJo9aEQMxz40jgGQXBk3MdbXlmAef/4Mf\nZmKw\r\n=aGss\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC41x0rFqGX7kwkwoFjTzNfUZP4L6kpsxx6uFZ9daV9DQIhAP7ABiesQs8DHGfnBNDhczZGIqzxvhZwh4ajMfmkI5XO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.12574572.0_1614717021641_0.2292811864774349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-select","version":"0.21.0-canary.1109a3d3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-floating-label":"0.21.0-canary.1109a3d3.0","@material/mwc-icon":"0.21.0-canary.1109a3d3.0","@material/mwc-line-ripple":"0.21.0-canary.1109a3d3.0","@material/mwc-list":"0.21.0-canary.1109a3d3.0","@material/mwc-menu":"0.21.0-canary.1109a3d3.0","@material/mwc-notched-outline":"0.21.0-canary.1109a3d3.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-9iBQQQQSuR06nzuCn4TqTYSQyTYEa4VjOPSbj/Jmm88dbob4S3GgmkiyfshPXbig7wsyFRAiJhTQlcKWI5AwmA==","shasum":"061501180925d26bf19275df59edc9288c15cb60","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.1109a3d3.0.tgz","fileCount":13,"unpackedSize":204580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqGVCRA9TVsSAnZWagAADF4QAIHugSbfXOWiUMKjjcOi\n8m7SNamyyDnthboS5/MBzbWSxOxLffYmGLiDSXLeYkUeAtovP5iYwshqlCw4\ncs1ClFE+lryEhDNEBrdys619LI99O3GMfqICCDgFvXTcmOAVD0u+fNtQvKf/\n2I8mZgH5qj/FudsnI3SDfktx6g3hW6b6zUQlbM9gi1NMLMwIRDxkkj1Wrc4M\n6BO/Cz2CaoWcb3gWhnJfTpYe/UlBpgFiL2jQbPKAlOcCXHCCyI8vAQfqyug0\nSi15BUjrx3BMgb1QFpwIyXhADhosjI9kChl2S7pDO0W5Ap8TKK71KQhjlsvn\nb7ae30vlewUT8QqN1YhSjkqKf7Wt9u+9P8u2hBxCRZ6HdglI+fxh1JFhHOJW\nQChxMKKOfG7S+MKH11jx9I8MH3qQPvrFr0UxBQyoPbQu+AVUk/ptfaCrTs6F\nNUCXjBjSbVr+w2kzw9lu1ZdD+1XZm1R9kk8uBSaZPK3wUddDDsXXtZI0816l\nS99ETCsvvHdQ5pxakzVQeWu7c3MQxx5JdluAogQiJ1qk+B6U+x3HCPp8CBrF\nc67f70k7I9bZLhvIhIqOavLlaY8YraZJIJlzc/G2cpWIsZUMzL7Hg55dFj4A\ndTyZMdJ9WrZbbml9eUTSZ07YD7vFExWLh788pUGdgs8smzCrV2OIQZFYiscu\nK59m\r\n=Z3hl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIED9MsMWboWtVw51CX00++KkDzLQuGkjnXc6OI65kQCRAiAyYPSJ6fKPE8SDxH05QFWR9n0WPX89Z5vuGGOF/ioEqQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.1109a3d3.0_1614717333336_0.7997913447580258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-select","version":"0.21.0-canary.b9cd8739.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-floating-label":"0.21.0-canary.b9cd8739.0","@material/mwc-icon":"0.21.0-canary.b9cd8739.0","@material/mwc-line-ripple":"0.21.0-canary.b9cd8739.0","@material/mwc-list":"0.21.0-canary.b9cd8739.0","@material/mwc-menu":"0.21.0-canary.b9cd8739.0","@material/mwc-notched-outline":"0.21.0-canary.b9cd8739.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-pMrOSI2QwfuZ9V0HKqu8azxAjfuFb0rneHGsSWzp1SO9QqWJD98/SwB9qo/ETHXKrbEOisZMHW2yp20ZrG1zbw==","shasum":"80be2987e95208aa4fd31ad1b6d3b9b864eff512","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.b9cd8739.0.tgz","fileCount":13,"unpackedSize":204580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8wQCRA9TVsSAnZWagAA1CcP/1dOx5lmLl7RYh1qnIA4\nnu3g8eTv+RFcKLDj02bTqaS3JT6LkvtYvMmFY0zBtiRQuWWhAkaNK6kU4lda\nBWNQScx7v1bHo33vTSPIMVL10Js4oLrDvk35r38ik7riXS5Wuga+sJwaozrL\numpRa9VqPhgRX26j8CBMzmRT0tkbQRkIVZ/1ZEk1tKpb5JNKNF8hrGHN5Gb4\nNA9aiGMwNC2X2IxltePhXYjYmekIuYUVH6G9l2+I2ozgg6xsNZQZXsXUAMFz\n+MdAE8nAivu7ofRm1CYQ6vWyJ+JZyZ4eOGgk/iNI75MUdRHHLRqHlwfHkqNY\nGu2MCfp89LjTzjA+dfFAbvMDewWOSkq7aoWjr7nXjHQ7UDFMhaM5jAQCZGda\naF3LXZDNw3ljxC93+Nj90DrKQo1oQ0bSf+m/gsZIoRyDWfSbu4Dj8kZcsdNt\nqGEkQJNYmsENhOli0JVg3eCak1rdj4F0awASnohB77hxk400navbDfnT1s4/\nvdS+jFzvvLaZxKBN1xPdndSFiPglRaYHWg+Rtn+GACgjXvTYg/7YJZhpMKuI\ntHcD1xq83I1wb/JtnY5J0+2LvDwcTCspDkFsyZIxpdJ0Nc5S7006aS01X5gE\nzP43LWtFNJiEk6nQki4CXrCOGvTZz34Ni/LiZj4KQruTeh1IoOmZbVkq4/Mt\nF8v0\r\n=QG/q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHP1+BnGma+5LpT5vVMLF1T0s8FFhiVixowfB8LdxDLgIgKmfi0Di/wis2zQv3xt+2o1xTINLqFxHqChB/sNQS8Ss="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.b9cd8739.0_1614793743801_0.8924265274582257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-select","version":"0.21.0-canary.71ee796a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/floating-label":"=11.0.0-canary.0b4a4b2eb.0","@material/line-ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/list":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-floating-label":"0.21.0-canary.71ee796a.0","@material/mwc-icon":"0.21.0-canary.71ee796a.0","@material/mwc-line-ripple":"0.21.0-canary.71ee796a.0","@material/mwc-list":"0.21.0-canary.71ee796a.0","@material/mwc-menu":"0.21.0-canary.71ee796a.0","@material/mwc-notched-outline":"0.21.0-canary.71ee796a.0","@material/select":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-KwQP02lsvPHGWnA8zXwvsoqfQlwTEZjDImb0v/nxsQ1ZjCmZE4dM4UrGY+qzMn8FoVz6VE3b3HxBL9Fpy97VLg==","shasum":"a0fc451b0cd5fed0ab059d736ecb4894a7a4c8f5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.71ee796a.0.tgz","fileCount":13,"unpackedSize":204580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+2YCRA9TVsSAnZWagAA6GQP/RokciAH0RsYc88vwnCA\njBlUwTo3JcLZLua2i5jSezyYdIpVIkSpK0E8Jsk/Gv+0tPuzBEJbM74Np5K0\nekwzCOjU00zdMh4RXFz8aRDQthIiwZP3nCOG4MAD6Zv7SMgpcxE/UMTnqNFn\nS+rxIeQ5nnUGkpkyvKTBGFUp+MkjvU05R2KClIpK301vYPyd+Q/NSTpYWXj4\n8muf4to1ONUjRn/XMej5etXDUIQzCfbo4kYu6OLkSzPP9dVlUYbyaJKjiPPQ\nNt+v7sf5T9ROxYdQ+U3TADoD7FstMhhSGbosm/vMpswQy0m8w4yasIZt+P/G\ne0VWaftK/zFpFP0jZCG4jfHlBS4QHnXJMRNzCu8WlYdECtPuZkepprjw3sy9\nrarmIxORWWbAg9FpEvidF+LANKA7kM+7rQ6XllH9AFP+dqBY4sgu/68s2VnF\nT2x+v7cLDCGpR/G3dBdbtjDtdtr6U+xcY+K11hKe7z+yrPB+w7QWPQOw7/3w\nSgPJOozf9smqUFfrMVeG3VBslFj4k5fndmIUXsqMjJecT6/m6mSJ76v6p2PH\nwpqU78veGQT0rV61TeAZfrwaCobdZyvSXscHeBPKtjVq+M9E7VTgrIWMeOJ9\nEateauPL+yTMQ8Rm5s0ogzFpAEqdpnNl5n8JKwQm1EVITE6ZdSrMhv6bhN+O\nOKDI\r\n=DPSK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXErlFKxnYG3tFvi/X0+0Pp8HhZm5XjbhM7eTJv2veJwIgPGasniEDIorJ004bG3M6773Pi5Xtu9ig4j/Ya58Sojs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.71ee796a.0_1614802328574_0.2382337526622318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-select","version":"0.21.0-canary.2be191ed.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/floating-label":"=11.0.0-canary.c7d98fcde.0","@material/line-ripple":"=11.0.0-canary.c7d98fcde.0","@material/list":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-floating-label":"0.21.0-canary.2be191ed.0","@material/mwc-icon":"0.21.0-canary.2be191ed.0","@material/mwc-line-ripple":"0.21.0-canary.2be191ed.0","@material/mwc-list":"0.21.0-canary.2be191ed.0","@material/mwc-menu":"0.21.0-canary.2be191ed.0","@material/mwc-notched-outline":"0.21.0-canary.2be191ed.0","@material/select":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ZMf+tH1iDRK2WTOfjczmeePbfcWcU1/wJzaUifoaBXiOnkhvuEcXKRtwZpC1bvsBJ8XVVmWwqISHGRmnppNMvg==","shasum":"41e85f1859a653537002207957ab5a0a91898e44","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.2be191ed.0.tgz","fileCount":13,"unpackedSize":204580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAUfCRA9TVsSAnZWagAA8gQQAJOlwacfhzDl1syUzc83\nr1GA/h5j8hnFP0WbwvpQARY1ry4EBh2aR4Cw4hdSzNmoMDCYfsfKOYGsHkdn\nX909p86o9LypSj5SdtGXEcGkmRsXL5GbFeUSHuLHxHlEt42IJWwsEABnAsAL\nzk1IwGImONVePHppLFSTEy7eZlX5zicuHVSF6enQtqLaMocD2M89WFlPWGPl\n3uQbXJE9SPqPYvqbfi09RCKnifuPqkgst6TZ9oKV/GnktYU3RhVPdOqIWqjP\nRLrm+wnxxGE8RmyGZLLaST4L4PRe1L+dF1L4eF2sD54E0cosLmzf7vCq16r1\nPjS8Gf+monCfp/QxW1KNlfgtAykYIoyfOjsYT9eBkJsLCq3pLykNLz05lIAu\nUBDE0NWPKrj8uptBBYz3FhumCEVZ7otowrqwuWQZzKyUNcoZTmKBy9RGXtRl\nALYLt1yyoPNNPTzVw4KdAIcYiWaB7b8Hjm5e7HM83B3etC0hCDt/K/KZQNQC\nKfGdBm2fJV5XcAluS2rSXt3qKv7CrkfeRvPBPzJN4o+Gnpr+3UfT04oX4Cvd\npzZWOi84UUNO6edBRGrMQlAVk6m1lJ0ioNwpWmYcbvs24qW3WCcU8a/qYPZO\nugpt2IdxcgkurAGb2kUiULD8qmGSqyRuK0YUN8d3HY9FZfMGX9j79WqJMjMO\nBbfD\r\n=5EY1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAf7fZOm0tVDBc7e7qhpu5P9Dh4M16ZoiXtAg64cy7RAiAhR38a1q6YMU+jqYwb93JYYHRpD4j5nTiwRDWsy0Ik1A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.2be191ed.0_1614808350742_0.02965091796221797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-select","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/floating-label":"=11.0.0-canary.c7d98fcde.0","@material/line-ripple":"=11.0.0-canary.c7d98fcde.0","@material/list":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-floating-label":"0.21.0-canary.6dc7b06f.0","@material/mwc-icon":"0.21.0-canary.6dc7b06f.0","@material/mwc-line-ripple":"0.21.0-canary.6dc7b06f.0","@material/mwc-list":"0.21.0-canary.6dc7b06f.0","@material/mwc-menu":"0.21.0-canary.6dc7b06f.0","@material/mwc-notched-outline":"0.21.0-canary.6dc7b06f.0","@material/select":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uFZb37Vo3Imh2Rl7BSCw5+tMso9viWv2KRc2cEYh+btjx4ESNeU3kVOGAFy+1qI97+h8aEb5P0kxML1IfyAvTg==","shasum":"f694699e49abf9e25d809983121b55563ed4f0d3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.6dc7b06f.0.tgz","fileCount":13,"unpackedSize":204580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXnyCRA9TVsSAnZWagAAb0kP/RXzwvZtEqse9wPVqKXp\nkJhT3toh8JzuoiC8PL+wJjzrWr4TO7JvCU8mbNlG1/S0zl6PNjBBoedbteBl\n4a/uJbYKVj15SIznQW2cjz8W0RM1fFmhH70SxpK8T4EgdBog8H5GCCnuLuIF\nvVpjAFV+isBGrYjwPmOVh3dcPZiQY4jwVlJzIz+DLHGL+MB2HIxSZBBr0bqT\ncyFiiyPO6e3x7hHj9oSTykLR4EdK4alxkOt0H1RmG4nOq456nzgWTyC95MxS\n3oSRiEo/DuL0w3uD8A/71wNdjuhz1qJ0Ei6INiadleG2hEFgrXCFQ7DGGLJt\nRTxE7cF92h5IHGfIUQ43wUH5F/bw4BjatzCxRNnNgBnjv+qAjVBIbVzaSisU\nr7GfWk+Y0IQaL4Bzf97ve/krbdmIskFYQp+pELjSwnLe941/Qb7wKw6HIFic\nGr63eKsC3+0a8/8KQDBVTlAEC4O3kDt1MfYsZY86jEHeujiI6vdD63V8PEpm\nI4ekADRqugd6qr8iAv/qJosN4W+0fQPZphM4fI0LA9BNllPapvTGQVijbFd3\nyYf4N43tXffz/ytl/bVNuZKEiBF0mplUJZm02RpmC5d2DtqgJya2/8f+nZQN\nw8wKu6uhcg0W8vzluY48sYhwvk6dTW/n7foEUN5NaCfZuQUWZng5/cM1gsVg\nquSW\r\n=5YD/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEz28E/V6ApWt9uXVWKJCMjqCf8OY8/fu0szUn5sL/i9AiAjQtO3VbVdF0NsoNRGkrOw2diLBLZTBQcCo4OhLVp0yg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.6dc7b06f.0_1614903793651_0.48892366211142124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-select","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/floating-label":"=11.0.0-canary.c7d98fcde.0","@material/line-ripple":"=11.0.0-canary.c7d98fcde.0","@material/list":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-floating-label":"0.21.0-canary.24fe7ba6.0","@material/mwc-icon":"0.21.0-canary.24fe7ba6.0","@material/mwc-line-ripple":"0.21.0-canary.24fe7ba6.0","@material/mwc-list":"0.21.0-canary.24fe7ba6.0","@material/mwc-menu":"0.21.0-canary.24fe7ba6.0","@material/mwc-notched-outline":"0.21.0-canary.24fe7ba6.0","@material/select":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PrbYBHwb0uEzQ3aSOtuB2Gb45ghZ1prEwS4sqFJ5SS5vwc25D8WmEAucALC8OWQPf0/mdw0fvLhavqB9rZvg7w==","shasum":"6edd50624383c39f067750920507af2cd3f080b3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.24fe7ba6.0.tgz","fileCount":13,"unpackedSize":204580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmohCRA9TVsSAnZWagAAwbUQAI4cdYsJW2eLpZwANfgx\n234zC6h4EBQVbsVJKkXGXRsILI9qJIAKQ3YtnvTbdft6L8ppa6dbMEZEZZEf\nTdTmYeMBA56wS3QeVeKOmoxXRKml6iksOEZ+HUo+SjgvcWoz2NvmI4HD0K/S\nbw/v/5Duc3NPuaOVacHWODWBCSrOf45Xc8wshi80DlAoqMwZ0pUydQyPueh/\n8dP7U8lWpZ5vqXz/hwrsXQsWC/dDSm6fzn37/ySYB5Br65L/pXYAL6uoNeZ2\nTO8WSanoTzyGI6DXGV7jVp0StCu6e5GjreFtTnz1DtIze++lN8t6DH47wAt6\nMQuH/f1cOl4oqSkU6VDjLt9mfO/E3HeAHhWcsFvf/nrJlSfhkInz+oQASZzw\n3fxmPzeCdeOz2BDSN3SphYx5PsWePG4Q8LAPglLfX4X6jqwEUeh7vHA68CT8\n2jXB3VuVo3AxvyobDv3/eTo3ZPUZyNpiAQKYhlk77sv/8fTnytzLYodJaICz\no+jfJ/uMdiHnl8tt+gHNCFMv/Cf1VGBzJsyRqUUMbEv0C51/KJxZ40SSCu0j\ntqpICynjxXL8CAxqq/U7ofjPCD5gXSW3ErQTgLnsyZjqJJJagxm63VeaDz0M\nDoyqwM6WFaTS2jdHqq/NqQwhgxEE54JT33pPVRQLR0ePr10RatW5A+m5Syb5\nME70\r\n=muSe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJZtujiSKZdaK2IxcP7Fd2UlVHRWGWJm4MaNhpqVCmKAiEAjCAVSheMcC6sWD0S82hGaRUiUgtsiT6R7LZc+NR+uF4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.24fe7ba6.0_1614965280848_0.22661382957631715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-select","version":"0.21.0-canary.12c477d1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/floating-label":"=11.0.0-canary.c7d98fcde.0","@material/line-ripple":"=11.0.0-canary.c7d98fcde.0","@material/list":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-floating-label":"0.21.0-canary.12c477d1.0","@material/mwc-icon":"0.21.0-canary.12c477d1.0","@material/mwc-line-ripple":"0.21.0-canary.12c477d1.0","@material/mwc-list":"0.21.0-canary.12c477d1.0","@material/mwc-menu":"0.21.0-canary.12c477d1.0","@material/mwc-notched-outline":"0.21.0-canary.12c477d1.0","@material/select":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0aBNQfRxqAHR6X7tvo3ZaSG0QbeDRGG1jNnjRr9Vp8Z/3fIwF6Btzg1Hf+Gii7gjD3Pq9zaZyDJLQ3OFrad1YA==","shasum":"535798d772bccf6439906572edd8232076251d2b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.12c477d1.0.tgz","fileCount":13,"unpackedSize":204580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqQUCRA9TVsSAnZWagAAOxgP/2yaBqziWvbtLfyj/d5G\n4Tf7hq9nrA0JtUzC8KbjC/NpO0tzDuLo3Lt4e29lHMkMMfPjmvoKkfAaYbkD\naJOKfI8pCxmJ3bwO+WPiVKeeqnE+SD2XwkMVOb9aNYUPtr6xneC+CYUbiAhV\nnJmErcheTRaw7h4fBXlHGPd4rASSzHOmBJVGopLdOKol+y5lYd/2/zzYulq3\nNWuHH/Slc1zhcPzl+HWYEkgG3IAMYEV9nO8Uqi+9gyTWFaZarLKMt3LO5SHF\nWPLUR2m1HA6TereaCDxGlGY4DOmGQDYNZrtB6PQ5RKYRfSWuq4g8MmF1XNzD\nJ0Qmmoc1PTt8C93Itw+RFzvLr47bVQuR/U8WtiHwOzvtVMI7nYvndYXT77il\np39cnOp1UOLs0uSH1RLOJ01aJtMKTOVVZWbbgRSnDNknMFS2GMLpoQGOg05R\nFkz4NCQa87KyV9R9Lva5RnWwJezR7jzWH0FYsZU/qAbM2GtJzWYX4tEmMOrs\n65z4yxVfZIadteNSshjb5Z2XHrsdZ2Rlro9lPhTWzxd8q4457csI5BaQyvvu\nmSYZ3fH2uw21YIBZKHTSps875cPl6cpyOa2em5fke5rRDOBcGx92yblnG59E\nrMP7UO1UoVeawJfAjo69yXyHiYSLnxLh5lVXy13pR0KNHOYiEZV3tMhLSuKg\nyfbH\r\n=7NgL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+k7L5WnGGZ0F2XdTLLQYWX+wAJ9AWar3k8KEQ6WT+wQIhAKmNRFLJwHTNDMgXhQObKg07tFuWeQr7nPajvJi26B8G"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.12c477d1.0_1615242259798_0.3220034328087258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-select","version":"0.21.0-canary.4c38f801.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/floating-label":"=11.0.0-canary.c7d98fcde.0","@material/line-ripple":"=11.0.0-canary.c7d98fcde.0","@material/list":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-floating-label":"0.21.0-canary.4c38f801.0","@material/mwc-icon":"0.21.0-canary.4c38f801.0","@material/mwc-line-ripple":"0.21.0-canary.4c38f801.0","@material/mwc-list":"0.21.0-canary.4c38f801.0","@material/mwc-menu":"0.21.0-canary.4c38f801.0","@material/mwc-notched-outline":"0.21.0-canary.4c38f801.0","@material/select":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-oVnS/+AjfQdv6EKLzJbubHcCC5b4wI9ZPQnbpT+PCAdOjMB0R+VVVK1Z4pbKtZ2sCWz0A4zuOTeRO7y8bRCoag==","shasum":"b0976db076d46ccf9d77174cdaa3226b210ddeb6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.4c38f801.0.tgz","fileCount":13,"unpackedSize":204580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrJvCRA9TVsSAnZWagAAU7IP/j99pqGwCuQnczIm7W7g\neO/9DTFPsc8wqe2oj/WyBF1IpKcw45o9yiZcwkX6GdIIkEGn7wFqoeAp14qW\n0Fgq8iadGhHz4zKi+m3DfuRn0zwHwvL6pdnfqY6+I74nvXhmkVIWUO2SkaEV\ngKhwyYAIMSKcQNnxnX22XZ6fx0DXMbXZvoOqvaePw1LjjeiL1IOERqt1RgJ6\no4U/OqDPBIlWaA+OTBevZgnyS8+/TzsDmMpb10d638ArrvRNneoj8xq0MMrL\nPfF9Q86sWzd0QzomeK6FZWmLe09+bxuylPt7r0j6vPv06yWXZteAE7KyZkbO\n6+Q/RcpkSQMZBtIuWHWMjOm+FSAlKa4OWuqjbayjxer1iYCKzrVdW4dN4J3D\n5A8ETnDaK60fEtuRzqWa+3Bc3qpCdC2D88d3t757dy18KmahBkfJDaDKKBUC\nCeZW6HNE46ggCzKP7evpZlNbzznSj8YaOa0MziZX0JEZqCPqtEUFX7QMuB4J\n0j63NoV+yS8IgtVeGXrYB1ylAoHE/C5NG6ut8lnNQAcfyT1UjlCGnePxC1oU\n4TL2cjUQgVjX4Egh2RGe0lrphhxr3P0JXYSKZ5bLOyRH8wWwIHq0GbHF17lx\nDcgRKAsMB3hI89wrJn3ssEofJq0WTK0AnLaz2sVQMKyisWM46aZN5TyeJOTH\nhzhZ\r\n=8ebA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIbgb3pkRY4J4gRCkIaPRGqnE71zrO5Ip07Jwv6heKSwIhANg+17epn2dibE1ame8id1H4f1/SRLYEWJHCR/pisrnB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.4c38f801.0_1615245934724_0.854148832019666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-select","version":"0.21.0-canary.8795b83f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/floating-label":"=11.0.0-canary.c7d98fcde.0","@material/line-ripple":"=11.0.0-canary.c7d98fcde.0","@material/list":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-floating-label":"0.21.0-canary.8795b83f.0","@material/mwc-icon":"0.21.0-canary.8795b83f.0","@material/mwc-line-ripple":"0.21.0-canary.8795b83f.0","@material/mwc-list":"0.21.0-canary.8795b83f.0","@material/mwc-menu":"0.21.0-canary.8795b83f.0","@material/mwc-notched-outline":"0.21.0-canary.8795b83f.0","@material/select":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ejbrHUysK2harCup9GNJLWhC2LjhHdMIZu4LApdkZPQO/86uZsGoNWmWbhmuovsWUtzwDwCAQNsaF/0ikD4HYA==","shasum":"d198a9653e89444f26cb0d0c553e0a760764a8fe","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.8795b83f.0.tgz","fileCount":13,"unpackedSize":204580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR75ECRA9TVsSAnZWagAA57kP/jiNTIpfoPTF6xBHYCHr\nOtyFjmFPLbUvO+HHp4vyH+pZzssMMm4FgDTvUy4AVaibOhJ4DpsSSUwZuMoB\nU3PR4ItE92LKlLbbbytNwgNshttQaKOn9ZPriCdJYvSguIsev2YhWwv1tXwE\nayBF+PbG3D5VvmM9RpJjGXCEVfz0UBwbnj0eYpVT8D6Qi/87ivEOT1VrbZEY\ngzr25DA2PMu7I2tRePufznGIc/6H3tVqz679iBMvg4lE9H9VKEPRdVUhA63b\ngTjVjYQeLx24WvSPGYHPqF/1HcsLOKfpBxb68/JCdEovfRTDv/eO4V1nCR/Z\nFWhEA0rr4vZAtC0yWVvSf1JLkDTzKXDJ0ArlCJht09EfutuT7Qo+fGe5g/UV\n687xVD+4yWOjCOdz14ipD8tUglMVSlsQUNgx450rdQPbO1HJz8xSJWc94nsc\n8qDKfDjvXwxr8LRcz5Pj6AaALtuc87CUKkFM0YAXP9LcNV+Pt/RJZkj9Pntz\nKl5mVtkOiIoyzkWjOOR6GuYamoLwZz4NZNFtdGD2MEWC9/MlToWyKxeETJ80\nafphcExjvOl4R1A6+fP+OmlFKOe9mhWIGXik9mSNCeLXB5zSOwxFFOO2Z1Cb\nXTk1dCAvLHlgqcQVOkrqoCMBlZCHr6nknjuxL/7LwbnNn6Eog/GkGajy83hy\njBCE\r\n=8mHO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAx+zPmYConay9hkY5mys7wPwZkABcJ8BNKdXB6HKxf9AiEAhT83pDvpZ+xGmDDEGLMk90rV5EflAANXIrFdVslbYBI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.8795b83f.0_1615314500188_0.19402745519616937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-select","version":"0.21.0-canary.12b84cb7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.7522dcaca.0","@material/floating-label":"=11.0.0-canary.7522dcaca.0","@material/line-ripple":"=11.0.0-canary.7522dcaca.0","@material/list":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-floating-label":"0.21.0-canary.12b84cb7.0","@material/mwc-icon":"0.21.0-canary.12b84cb7.0","@material/mwc-line-ripple":"0.21.0-canary.12b84cb7.0","@material/mwc-list":"0.21.0-canary.12b84cb7.0","@material/mwc-menu":"0.21.0-canary.12b84cb7.0","@material/mwc-notched-outline":"0.21.0-canary.12b84cb7.0","@material/select":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DblumHMhxqzujkzOdp3sKWRJUAzl5idZXqbEA+EPlPPnb51mF3ZT8lIhvL537RRrFBDQDygvP7a5D4TqbVbDrQ==","shasum":"1d670b1341e15d95e5a396d9b8cbdc5c3ca15a4c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.12b84cb7.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBXaCRA9TVsSAnZWagAAV3YP+wUOGjOKDCe2OPRJ2I2m\nkwMA7C16C0es6aenM4OY2/Tj2X/PuSPjh19ZsLbEryDZ/FnX7gpmDnGuFDEg\nPfnUeXkxoqBH+M77MhveLghtvxUOcP0JSAomMLEkXDcPBGx1N9tJch0FSwRN\nvw3725IVGYXiznP0bYZyGkessQApxv/Nmf3RyCugwjN/5+LMwINapfuSVitB\nNf6m3hwiCNnKtgKsjVpbs2mEuV+2+v1JdbGMCCUiTlsZdnrBXpO5+YCesBkQ\n4R7bpla/TmGTdWVCY/YomSCCoCcI01JeFbJ+8St8AjM4vW+B4Lz/AYW5plXD\nPTqZ4GZBbxlE65xogOwR31vm+RNpBavkk308+T5t7jAD9qo8L7fshDTA/eN1\nFEkiftuIHxVrUVjl74fp2UjzDm8N3bGtCYe7WX5roi4/BoJz4oQiAuV7JZc+\nO7XobOIUrwHipUFgKbCtj91CA6v1ifFL5KMibuEJTfmRoq9kEAcrkw2Epsyx\nsCzkKVKiXR74uztbZa4WhYxUgryuR1uWlkmQ1iXFedYBa/9zuCMEi3tKY4++\n171xeTGcPOGobOb4FVgJ9vjDNR3CnfpERfAe+XhuEmkdRbSxAXXwdhVv/zrz\nZtbM1ZyGZ3RHmMydXqi/hUkAm4YSlqaqH9TLLIZ0ZlD6tN3hN2LaBa66oTTQ\n8aCs\r\n=YwR0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlNUSU8VdJjhLZF8D1xgLlS56vzO8T4r70rhoamZLFCAiAbSgp+r8Zto7E+yUOI872HSZ/on+BypbLzWj7+p1TISg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.12b84cb7.0_1615336921509_0.9438634224071671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.6ac6784b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.7522dcaca.0","@material/floating-label":"=11.0.0-canary.7522dcaca.0","@material/line-ripple":"=11.0.0-canary.7522dcaca.0","@material/list":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-floating-label":"0.21.0-canary.6ac6784b.0","@material/mwc-icon":"0.21.0-canary.6ac6784b.0","@material/mwc-line-ripple":"0.21.0-canary.6ac6784b.0","@material/mwc-list":"0.21.0-canary.6ac6784b.0","@material/mwc-menu":"0.21.0-canary.6ac6784b.0","@material/mwc-notched-outline":"0.21.0-canary.6ac6784b.0","@material/select":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7gvJ6djARzD+XbSyTuE9vmomKvgttNN84s9Ug8DkLanptEwYTjutCRBnc/jVTv5KCSkoKhWH1AXCcqQcGBg8GA==","shasum":"b7ee19dc000827b11a5cd9d188060846312a7c59","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.6ac6784b.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBhMCRA9TVsSAnZWagAAEwkQAJXL81wz6JffWo5VzW6u\njdunkG095bEntgcR7NJXwokg790Wv7qbOc8JTwefQS9sDPT1TCHd3IjxkYNl\n8wQigx4P9lt3uMlsredYHL8ehFlgSqfsQ4X8SzyOF3GAwg1CfSZz8j38nAER\n/ZMJT+Jo1c5cXMdQ15vNFA6EBcKjsN13RonB6/NHNXgXfmhFp4KdMOtCziwH\nhHRR8hH6/p1n6Y+2qTEsp7Y+76KC0EIOV59xWS4CTVCO0veDNx1iF7qIjON7\n8ORfnfb7tz5uYT/HgyGFfcAbtcg8rzs2+IskBn3n6Jl8ii/cErXuGL1zyjzu\nQ4XlPJlY3s0iOoeJGKKNfJSu7wMFnKQrKlO/5zEnE7uzPXAJG3KdFmuGXrx6\nCjipY5CP+0eXeVNeNlTdOcxIlUspPCEGfwmbDCNLyUL7PIKG4/5lZBz+UjTe\nphgsdN1qSNwJC2bdud95fghnClhPAfv2FC6/ErpRFP62u2NyUO5ceA7aenIa\nU9+mUulHPdO5QijDq9W/cN8NSJK6wceyG6XntPF22elVhcsLNuEh4TaT7cXf\nj4hy2NfNoRZVNksBDfKsjGJv+lVX7RW7SaTwTppZkOrCeb6iDClNJDsYakrK\nqDj1arkeVTu2ay5lGdHDkV+n2poZe+zoQVg/lf6LJlsaezNdxdqF4tX2FqcT\niXEU\r\n=sY31\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDESKMO5ep3QV4iWEUROnwJ9E4HkTJkx0obUAGd2HJ+hAIgSUWvpH0vt6wl1lT5yd9p3e0YJI7vfPRPxPavRErS0l4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.6ac6784b.0_1615337548060_0.04498759126270313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-select","version":"0.21.0-canary.b6d92934.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/floating-label":"=11.0.0-canary.59010b6dc.0","@material/line-ripple":"=11.0.0-canary.59010b6dc.0","@material/list":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-floating-label":"0.21.0-canary.b6d92934.0","@material/mwc-icon":"0.21.0-canary.b6d92934.0","@material/mwc-line-ripple":"0.21.0-canary.b6d92934.0","@material/mwc-list":"0.21.0-canary.b6d92934.0","@material/mwc-menu":"0.21.0-canary.b6d92934.0","@material/mwc-notched-outline":"0.21.0-canary.b6d92934.0","@material/select":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GZaRzdPMJ8l+xiKYxjfRBkB2gB1/9O0LSdMWW7stC5Oy/VZEBpBZYT3nmBLV9wnA++ldZx7q5Wqay0bC1ekUiQ==","shasum":"baee1b45ce76d2922e952d407fce55f7552507f2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.b6d92934.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUHOCRA9TVsSAnZWagAA8tsP/A6G37Gtas5E2LWSVFtN\nEiJbUSWqA0J9fsjCbs9n2/OJV8ZWRR9y8xDt6oEXMA4ZdK+82wQ6qGiiCAKW\nGznOht7Rar5OdJ33vqqjvDb9DyKn4/Rrc/e/T1H/Aa5vOkXnurnJbSC/cxyv\nqhzK+WXt6nXWgBsbRUe2ah79QsEhrlmxp8+QUXDDZAs6KQaXZXhePvGRKbtY\nbJtwfiIoNjmeRpDR47i6qWEktN2xzqTgkPqC6eM/ToXU3/nNqL/RzVUMvIW3\nTgpydwI+3wCFeV/eKF4URZxmmkG96GspdqI1qN1YO5Dss7z6yR7UQYhbN5UI\nxU9bb+eKdB980FmPegvrHBcl+jCNxJEGS4ufCH8iQ2s9FB0foZBkM1Ay6n1T\nCMnJp9K5ODNK84g6WRbflW8PQ+ognHQKX7bvh4ETcZorCjJFMI6llo47Y0Zd\nDD/j3Oi4VjH5XroD8A1P79Vz4TaXnWdaiQw+gqTrifPXWXOa53hi00K7H3IQ\n4Ip7bOD2DSI0GmfQjJib1SvFIARFx7opiy21Do1brEp7lWQZEOxkfMRYCjGz\niisstdpz6LR9HlOd9M5JP3svMPGRxaysp8DyHO7hQnjlpDsnwGtnyhx22KdJ\niQlVyB8oNKuR2jeA7K3RPTDN1FnjKG4S+AC+Oe7BWZfkmS0GqKoUJ+F0qRCv\nUzQC\r\n=2A2F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7G/rvdEJPUIhIiX7CqqyJQHpDRHlbnkVqLvrfQsN7DAiEAhowNgLq8IVnEn804RiJrfeZSf2f7mqBzHu7Je4JHZGA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.b6d92934.0_1615413710182_0.7712204120349053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-select","version":"0.21.0-canary.99a55b9e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/floating-label":"=11.0.0-canary.59010b6dc.0","@material/line-ripple":"=11.0.0-canary.59010b6dc.0","@material/list":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-floating-label":"0.21.0-canary.99a55b9e.0","@material/mwc-icon":"0.21.0-canary.99a55b9e.0","@material/mwc-line-ripple":"0.21.0-canary.99a55b9e.0","@material/mwc-list":"0.21.0-canary.99a55b9e.0","@material/mwc-menu":"0.21.0-canary.99a55b9e.0","@material/mwc-notched-outline":"0.21.0-canary.99a55b9e.0","@material/select":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8/XMIAUtGSvrb5xnLpeQ/fVWYlxIxUYVFLZGoNCntp67hVRtitvEATdFG31IMKQGBBNasnU4tKw9eVCMMIq1sQ==","shasum":"ff040f780b7f131bf87e2c830f5a9ec53e37ec99","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.99a55b9e.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2zCRA9TVsSAnZWagAAScwP/jBAiLdlhCbZiMeLtVj+\noX1r4m8XgwvoZW/B3uUjjIAIPN+bdaMCh6TRVXwn6ovE8Zmf6zJJqhI0wJS8\n7BjxlHPmkbyyZ1Umhlik8hinUY6+CgyE6eDkxpiawal/rAl83mqM72tplnb1\nwiOb9a7cNjyGSG4tV3Rr86viPf+Hhk25PJUltigDP48OevJFoLCPw0MJUVVh\nFIr0lg7sLe7rw3o1QlTzbakuyBL5FHRvR/IvBys9WzBqtXCZKgwLRwjttLEV\n257FCmyXA3+hnGIDVwE4lqWKRJUXN/Z8+f0yqlAajdaLFAmEzrZqYshgXbEY\ntFw64mNuQXmNTpdoafh8B24rHP7UOQlFDrqB4fxTM2iPBN3DdSurCgC1auJO\nA/QFDVLTh085QffXmOkXcRwBP+dfpgFrvEgHP0TrbcXaZksdfg1x4BYctS5q\nQzsZaFBNL19Xz+egi67ux/+DrlirQDnUkaFHs1Bv54G5RSrnJJf3kL7c3Vui\n8BR3IJAbF32pvmWEft7WYU+jqNUrql1mF94S9ijrpJsjngh/P/R/vjpcI79N\nRDXpThUCEkO0O0CJwuk5azGkC4THh65PDT/7O6G+5CjO8jXB3PK83z6VzDFN\nkWDoW0D8rTUU635ow4AacD1sl9++ZC3vXqbP82dEJIo4Ok/3uZ/G391Ob22U\neGaE\r\n=OOkt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1elvcvzhpXOWIijogkSQeE3IppidfxmHZ8EKjHAVYiAiA7UgVBlPfhB45hHkiZbvsZhv29cfFtNyi540TIiAiBiw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.99a55b9e.0_1615416755462_0.7101988274592665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-select","version":"0.21.0-canary.bb14efb7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/floating-label":"=11.0.0-canary.59010b6dc.0","@material/line-ripple":"=11.0.0-canary.59010b6dc.0","@material/list":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-floating-label":"0.21.0-canary.bb14efb7.0","@material/mwc-icon":"0.21.0-canary.bb14efb7.0","@material/mwc-line-ripple":"0.21.0-canary.bb14efb7.0","@material/mwc-list":"0.21.0-canary.bb14efb7.0","@material/mwc-menu":"0.21.0-canary.bb14efb7.0","@material/mwc-notched-outline":"0.21.0-canary.bb14efb7.0","@material/select":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EyxADIIhIkqh48C/dpvKcUUYIg7SZUAQtalJVPohxb2ictpbM6DJkTrGJ+mqsyANjYklQZ1SzN1H6O2zx2wYZw==","shasum":"6c716def74f5d20b38eb66d184af520c6a40678e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.bb14efb7.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVhcCRA9TVsSAnZWagAAH+UP/inR50+3OTU6CTanbbQm\nUgxebFLeXOSp6dmuS/4OsJL3f3IGy91/twPKNipNvcmEOpM4Wt50BnCMEXKp\n2kVnngs9C6ruka9Mnxbu0eu9uCSS5c2fawaocsMHHN5+qcfbtg9vHskYnveB\n6zORgJP+i/j2zskoI8MQwqz46NGjrnTDqVYCZL2zaSuXjB/msmNQSMJr2t1J\ncNXKNyJteoXbcmCelD52XjOWM641PHcHuUdH2Pj5iZsigLKz8hzGjVlMJHWg\nhDol8c63B//WLFmOHzRIM5uDORElaTrPsz11KpIgD/0TEBFvR2WEXE4GR29S\nnh8UpJxiPzq1DC4XM7lfkZocM5rEtDitUnP0ZvhD9bcf/95zljlTt/Go4OPv\nT9mDu4S0HNTXcK6EbiEkQhykC10tZ3g4ATsqAmmAsuSs6XsVgFbOml0qLDVM\n49hYcc7Zp+Xshefv8KnamckJwMKPX52Y7LRgFcHZVUxbA3i5JwOq4r2ENlVf\nXwznDJUH4en2QpD+dJfJhE1DDPsdZ7BIA2M9LyI1qhpuGfPUdYoowKvbEZhW\nMunyS1XG7flB5QMuc1rPblZam2JALpPYRhGVhpJMqBNvQ8dMRPRsvVspTYek\njRjRQvccAKZLQQa6HPsLL6H2BA4YPJC4doZGOh9UpTR4Y+ipA/Cj9yQKVGR4\n8m+O\r\n=vme8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdZ6xuSWDWGlRXm5dSEWUHOsZ9TjUaE3hFTg8qlrHhaAiEAoNQkK1LuXhn9PRQdo2hvzksMFxr+vllPj7/k0LHsyjg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.bb14efb7.0_1615419483730_0.9174357355013205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-select","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/floating-label":"=11.0.0-canary.59010b6dc.0","@material/line-ripple":"=11.0.0-canary.59010b6dc.0","@material/list":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-floating-label":"0.21.0-canary.9ecf3bdd.0","@material/mwc-icon":"0.21.0-canary.9ecf3bdd.0","@material/mwc-line-ripple":"0.21.0-canary.9ecf3bdd.0","@material/mwc-list":"0.21.0-canary.9ecf3bdd.0","@material/mwc-menu":"0.21.0-canary.9ecf3bdd.0","@material/mwc-notched-outline":"0.21.0-canary.9ecf3bdd.0","@material/select":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BVG0k19eI0+JxIiNqKCw3C40sxdezacIk7HDcDpezoAdLuSDqfkkLuLq7fLWeTQUpGiWiR87j/gOoYNrFvIS1Q==","shasum":"d27bc58d665bcdf57825b75232d25e4c2fc0e547","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWNKCRA9TVsSAnZWagAAexUP/RC//o0sJ3xyiyll0sMG\nIXqRq0JTB2nRylsf4jwPoC/OgPI8uw80iMDoNZu16xFsQDZHe1MeXLYYouyk\nFCw8p/uUZbCLOW4zTDjlK9k8pzxLVzkhkC8dwNLfVygDZOb4xTcnVDpsbMr7\nQjsmjtasafGcZaqZAcgVAyZcNoE6xtr0UEY9YXY47obiDW/szcydlXVnyse1\nmMdMIYzQ6OR78iHxBdYtocNdrsedvtiBjzPOLauAK8PWSFvJzhhaX23Ugs1w\nf1M7TlCUwUIhDrcu09ks4YZG+zXz/6n+LPxR7kG0G5/vOC2lplC4Hpk30AHp\nMpx5ZNeisUTvk1S871r3KMwG8UJ021oQZiMW0fZy4+v9g514kgG+EqIeOK6d\njxdCoL2ptw2TBt0WK17sZXkJit5ZhNzg3hYNJ+cxCk1BtEVY5qHRePsDxhyE\ntqE2jjybQIdl8wQEVD9dy0nrAh5sjUu+2gSmU2SlKkMgh6OV49aTmUnGKAnG\nhjOR5sDm1p/U5HCZ2kkjLL+12hDqtSMgjkugPPSbBgPTV7d2Mz8wSIdu+0rs\n0fayOGJ6p0nAoLRAP9lRDUTy7tK0igMXL8DV0HYeMP/KlCXjbl8W8lHCQVK/\nGBFim6MTXUmoKE4doXrUFp7YXJVXzNagsDrV4hmpAIZWcvMF8ZkNdE3nUVIW\nC84i\r\n=WXTv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFO+CksHIgFWjyJizae0bhQgRVe2Tdh1rEVHW6wGg1jmAiEA7tht7gIroFz3l8rJhlWOWhgLBzefakujFWCNhf2q0ao="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.9ecf3bdd.0_1615422282200_0.22259138108494292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-select","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/floating-label":"=11.0.0-canary.59010b6dc.0","@material/line-ripple":"=11.0.0-canary.59010b6dc.0","@material/list":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-floating-label":"0.21.0-canary.7c0e02fd.0","@material/mwc-icon":"0.21.0-canary.7c0e02fd.0","@material/mwc-line-ripple":"0.21.0-canary.7c0e02fd.0","@material/mwc-list":"0.21.0-canary.7c0e02fd.0","@material/mwc-menu":"0.21.0-canary.7c0e02fd.0","@material/mwc-notched-outline":"0.21.0-canary.7c0e02fd.0","@material/select":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PfAOhe6VI+bUFxI8kebK1udAck95Xo5XES+KrK/T250/KDKP6A2Vfj9plPubI4ZxWV8YgmYAp6gx0Hss6siMQw==","shasum":"947ecc0e7af6ec002381d58b53a89bd4be1b379e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.7c0e02fd.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXazCRA9TVsSAnZWagAAzbEP/jxHdwXquAbr7I7LgFr7\nymutcMm7b3B0fp9MgxWA2LJ+mx3FwTr/zd6LNbywFXAM3bNJN6Ayd4VUuG4L\n+DkiCJ0WcRX+zt6pYfbs2tCl6Zas2JLX3z8lrcfIVpQoMJBT7905GMH0VMcs\ntkhu4hGZQFOhjQtpIOxnpRIniKhArB1hudgATIxA9XFTWmmp/FpVCjQHQs9P\nZYo3YzAeD29Sh1jRgfc0D6DX/XJognoJB9CdyXvVhlZv76iNwSP0zdyMQvQv\n1wm4qU7ky+C38AySVluNvRWSG1hl9G0CZtvtV8pphrQ7xX7rPyx0zs/lcDzs\n87G/fYjCp2c1jeN/xIJs2aqqxW6xta8HK50pcfu+OxJ4aVpKbUdDzcbdS+i2\nNP521GZbfhGzgdLBHkpNk++C9LaLllbDv5srJC7ZQjiBMg9Cc8yxwJqemgNm\nL4Vm+iPMk/5OLMuwJxPD+ajnhIlWfVnhRrjopEJXYFdfvFIZeiAxKv7ybYtU\n9nylI7+UP2MM5PIg4dOH6e/frQ8Y3inGtTJtDhdNnNrifMtzoeJjYKynMT8G\nrTKSVDkNs9DU1qFAm/UNBvhuSVMkT4Q7e5Moox6tSZhdqby+NKE1oBzXYZuT\nofB/1XHkqJ3hv0cAv6yFNveriNvf1BEoEi0Q0zGiTU7AjPqgC6S8AaXkg0Ig\nnn5F\r\n=s6IT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVYMLXH5AxpYicHhg8p5BbBzCxBbZJ5SOlBREarDD4VAiEA4uFmPDcVUnIEtPvjkHWDKTWAu4sQsiuWv7sNsl89ozs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.7c0e02fd.0_1615427251156_0.08401895111086644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-select","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/floating-label":"=11.0.0-canary.59010b6dc.0","@material/line-ripple":"=11.0.0-canary.59010b6dc.0","@material/list":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-floating-label":"0.21.0-canary.2d6d59cc.0","@material/mwc-icon":"0.21.0-canary.2d6d59cc.0","@material/mwc-line-ripple":"0.21.0-canary.2d6d59cc.0","@material/mwc-list":"0.21.0-canary.2d6d59cc.0","@material/mwc-menu":"0.21.0-canary.2d6d59cc.0","@material/mwc-notched-outline":"0.21.0-canary.2d6d59cc.0","@material/select":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2cyaLAbKEs1ue075arV5xYDtDeAkdIyIVbuPnJ7DHWoEmhL/4UhjPnMveQ2aZiMl9jzrHgOXc4jdRx4jwdO7dA==","shasum":"da973904602736149e76b3d2368570cc26d034ce","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.2d6d59cc.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmHECRA9TVsSAnZWagAAgLwP/iQfjw5ACeVjgH+S4VEb\nWHYr0dYwZTDeW+qS9seahHAiz5H+Lhsr1BMM6FdYMUyfxSAvkQaWML8If6pp\nrBIK3euJLxNsGX+UgslfIAGOtwQySPyrHUTIZGSC+ze3ejmwcWYy7jyJeMN1\nsSSG+ZiC4eos7RO13fOD7x6rTF10qdryxFS6nS4Vv7NFjR0PwsUXudpnDtiV\nYXQGN1glI8o2GMNItW5khkU628lZgQgQwWLdlKehnq7yvrqaqsea/zPH+bxU\nNqhKd18BhipPUgudy6ilkRmOfvjYoa50Bk1bpnpFeHAGb+nWldkjLxA1RTC6\nzRxKigbzORviIyHj882tzeZfGBGz9VoQTPdePt6VM8pY1rxHBT3GBJ/DHQuC\nr8vMZjhMChuwHPYbyzckX1MCYk98JyrmTOXJsEn+2IyRw/rM1nusfbeMKwey\nIzSB4UXAbHYVVK+L/fZnfT3qtQfi07av3F5caioxENSY8/FksKmB8G1kvdzl\nbs2yAo0/bDb0U9j5GVGlMrcgE2RPuTVuyqne8/NJgfz8QbWYPX+O7rXi1eQ6\nrsgga5I5Rxq+y/J2M1GL6coIZUXJBQ27IlGqCq3M7zzSIgCK1ZSIC2bGfzQS\n2IkClwNOvh539CAcoiFFDvF5R4l4lvMKW09lXyKzSsjvXhth8gbfbV69FTXb\nqNQS\r\n=vS1I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFVt+/OKHmRkaMK1npHNUNEnlBrwXG/afx5tqEiJU4nUAiEAopICI52CIDetJu3ltl8ju1Q+KoI1PG8GKtV+MKUsmtQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.2d6d59cc.0_1615487427892_0.7548879182614794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-select","version":"0.21.0-canary.0138863c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/floating-label":"=11.0.0-canary.59010b6dc.0","@material/line-ripple":"=11.0.0-canary.59010b6dc.0","@material/list":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-floating-label":"0.21.0-canary.0138863c.0","@material/mwc-icon":"0.21.0-canary.0138863c.0","@material/mwc-line-ripple":"0.21.0-canary.0138863c.0","@material/mwc-list":"0.21.0-canary.0138863c.0","@material/mwc-menu":"0.21.0-canary.0138863c.0","@material/mwc-notched-outline":"0.21.0-canary.0138863c.0","@material/select":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dfzt77dlIhaQum8g33iOlfhh9RAzHALGCpKpORD73iZ8EoXI6GMvRqM3icZO1bTCzd1sB82DhKNDglVFTc2pSQ==","shasum":"ba523f240de64546b293e8f3c24f3b3a1a06a4b2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.0138863c.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmN+CRA9TVsSAnZWagAA18EP/iyHqjNvipUVht1BSQKK\nSbGlWhV/h+JY022kLmL92N4OVXA/V4U8J2wZREiR0QKAaqZqeQRrmzJBAUb6\nMDmjj0kEqcLAjlr6r+XBDF7DcegDMs4njXknivSBTpa/3ivJR2wp67M3kJgD\n0OClHIWiHYXQ0UWD1W2xQIe4N8/PgFWSjDRS0Q2hESjtiBdBunBTd36XmKWf\nqdk90gVa0gvvsS4XNGNbsM68aJmDmgIBZry8P/3S8JQRwO03mwmcmvwobq05\nni2qCXQm9bKriqV6/Q4jBaBI/VZCoBrAXWidXw2J06/zUnKdPf2SFO/X68Kb\nqU0t5mFlOZQ4A53V4VmmA5dD1W22vzdIaAv9GtnLw+aRlrOMjj8Lmh8X2rHo\nR4HGAwrREyGXIxBfEA1chUXbnUKlxSVv0p0TzBn4kDkYZli5CjdfOZIzh3Oc\nvPAjjsUe438VuBWxFwGqoiJuV2xyhBiJQn+EAvv+GkkljRr0GvPh2GXXzEXW\nhVM9Sm58VE2mKRzCdAos4KIFKP1qY+zOpZwh8yXzGI1om0Vjln0LKrK1rHSR\n3XV1iIx4c45e8csxZZwkAsUBJrO4GPHRG4wSaRgaKVAJqoxVgDlYFVbdt1dx\n/bChu1Rosnl2M3+koUjnkJfBWh55kcp9nm7efb+ETgiAFqP+nRQjfqNPg05a\n+r8w\r\n=lOaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCA1KUNWZKO49yMkP7fYyD5z9BeWwzLIOyMMvp8EGeQ4wIhAOZw8FM0CgKsM94RgISNjOybXUsfqwkVgUt1+MkSUZSw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.0138863c.0_1615487869996_0.8482929293901049"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-select","version":"0.21.0-canary.926f5bad.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/floating-label":"=11.0.0-canary.59010b6dc.0","@material/line-ripple":"=11.0.0-canary.59010b6dc.0","@material/list":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-floating-label":"0.21.0-canary.926f5bad.0","@material/mwc-icon":"0.21.0-canary.926f5bad.0","@material/mwc-line-ripple":"0.21.0-canary.926f5bad.0","@material/mwc-list":"0.21.0-canary.926f5bad.0","@material/mwc-menu":"0.21.0-canary.926f5bad.0","@material/mwc-notched-outline":"0.21.0-canary.926f5bad.0","@material/select":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-gEymnmjQSLPPMV4HM3RVnJ6vpzO4SVRwmLeQUOB6HemqnLEhjxp4i9ZgG38sI4j59vvokoNFGB2sZlw1JgUZpA==","shasum":"4610bc5ed7fa28c898439671fd42153da1df0160","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.926f5bad.0.tgz","fileCount":13,"unpackedSize":208770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSntWCRA9TVsSAnZWagAAa9IQAKFnPakz6AvHyORydnmx\ndqgcPUAo7IE3zM3vwjS7IBR/vnfXv8rMr0Gr+wtALE4Kzx3BI5p0spoD5wtl\nKjho4zj9eUWPU5VytviavKpA0zywQMB4fOHmIZZEPv1o+tx+RtpIwHU7ygri\ncj30Fcv6vrVkhrRqQxUn5BkZNW3H68Lf3OftiHdnGSvvEki7vXBWn1/0Vv48\niZwh4cvQtmRaRFny8ewMyzm+05ObxMVDsmnR4nM0gDX4i/fXuu0P6rCvuM+9\nG+M98ummF73yOH5850oJapSyKLM0Xs4bsl0nQJGrOD0f5pKqh4zq0r3m4Qz5\nSBBgQ9AEh8Yrk/RzqCy93IJtPcmshajyT2eg0iFJ0IBi1e8gf3jFpwHn81C8\n1gdxNPhF3qMfoh3USJVWd+v5ILP5qziMaV4RUKUxmFgr6G5m8uAYLdVCe96Q\noQl7CV8WkN5DvKv5zL1AakfA+d6ZWK1P8A3Q/Sc/sa7APpGRnBQhu/k7GTrB\nZBSifcG7ohxNzCRF22OGTbhho+luYQZIxi8125YVCWdhCjJnPNtHoY+IMF81\ntzdZczilIq1cVbIREmvrJ6k6CjED9C2b0yLn3isF1xlnhnGqVmwfoOs+KtpF\n8PAmOgvx9pxBw4VlKGnJ3lsuMDEXJgLUfuGQ6ZU3AxHaeEYYrXGdfIlMWpCd\nZs5h\r\n=O5TY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQwNbWB3lGv2BvIl0/WQG7fKkc1nexwuwz9hDs9OZvmQIgaS2Hd6lN+UGPEm8W1qwuwXZJ9dwBKo/cPimjdSRaPZY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.926f5bad.0_1615493974516_0.879744007646448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-select","version":"0.21.0-canary.520290a9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/floating-label":"=11.0.0-canary.1e0653477.0","@material/line-ripple":"=11.0.0-canary.1e0653477.0","@material/list":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-floating-label":"0.21.0-canary.520290a9.0","@material/mwc-icon":"0.21.0-canary.520290a9.0","@material/mwc-line-ripple":"0.21.0-canary.520290a9.0","@material/mwc-list":"0.21.0-canary.520290a9.0","@material/mwc-menu":"0.21.0-canary.520290a9.0","@material/mwc-notched-outline":"0.21.0-canary.520290a9.0","@material/select":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ot8xvVkfB7yVrPSb4OJoRleAMRtkpAnLtlfl6+OaOoye1kh7vHVHoIf6y7erbH8+Xny8KigUu8NkR6GTXKHjcA==","shasum":"60915afe4be8a09a3960c47ae4eb1f9b7b235dab","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.520290a9.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpmkCRA9TVsSAnZWagAA8AQP/icZwr9gRh2mKfk8kfCM\nFAJNJKqtUxg5IdBsD7Ayc+2tic8Au1EKLXZH6NXeeOEaDK6+mxs6GjyWIIlv\nylG6yyU7YqmkiVVOpkhHMNSt41LPZBy+mEKGdMCIA9Ne5Xy+crEAJYTb4oyr\nuuthdm3FhdnO2f+a+Tsy7BGqJ4rux+cL/VVrRDcUecBgRQtXiVEOhFxMeq9Q\n62UWQQ92aE3kiB8SdBDMKTXHh1Gd7w/v0ESZrsgfPmhsTJCe/8knd+VWQOEA\nbM0EzNlrjN/Uw9coFbqM4N1Y3nagLVj23eNSsCHk6cCGmktPNH64Zj0I751M\n2JLK38C/ANBDJX1jGgWcuunKe56ChozgjII5z98PK/Cf6jv+ttqtwff/hYrc\n+JxmxINL3xLeTjLnnponwJfm8kpxpeZRrG8mrE+yNO27SuEIhJ6ITLy3lM6s\nu3qqybMtKW4yZbVhB5YJB7yA346JCszqs5C1TNrLePYs5+lk7gFshz3WtXgd\nxSowiDCpReJDxQl1wWVgGPXdmtDfkrxavUA6VuKnjGuAPWH6e4an/ko19Br+\nsdXfu0X757b01upW+1PcZK1XZyEjODFoANWSRfXsZ+GhtGyCKxNml1oE2UaY\nqDxV+JwQm+15gCeqCvrRf0j/kRSX3v+Zl9CFmYxicAwEmIytMPIPmWPGes3y\nOdbp\r\n=BgKs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH5iH3OAZMmfd3TpqOgpQUhWxvH1CEumz4fiah2RpWkPAiEAzLbMzCudrwgIvZSa2q+LK6CDASw1Ul1PrP2aNqtlN74="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.520290a9.0_1615501731652_0.07566312469570247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-select","version":"0.21.0-canary.9ec431d1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/floating-label":"=11.0.0-canary.1e0653477.0","@material/line-ripple":"=11.0.0-canary.1e0653477.0","@material/list":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-floating-label":"0.21.0-canary.9ec431d1.0","@material/mwc-icon":"0.21.0-canary.9ec431d1.0","@material/mwc-line-ripple":"0.21.0-canary.9ec431d1.0","@material/mwc-list":"0.21.0-canary.9ec431d1.0","@material/mwc-menu":"0.21.0-canary.9ec431d1.0","@material/mwc-notched-outline":"0.21.0-canary.9ec431d1.0","@material/select":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BoJTT3z0Myb5/DaueqR+oqMIh+FT9u6E0QF/wQrSYzevK/IsZn33gSmAe3XYcMwmPsBpVc0i93WiRHBcNZvVYQ==","shasum":"809230e702fc8bc6f55be1991fa465b9047d5e90","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.9ec431d1.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqsCRA9TVsSAnZWagAA0v4P/R7MBfeB1SzsSMw12cuP\nxkBinp2bsW6K3N03CIZIymzBBvekyNwrYZ+eDntnEgeyeROXpwft2ESyI+Oo\nyiz8S8FanEdA7R7hjX8a9PPNtlMJeEQ7P4vWEuVyIlf/gqeM88kJl8WNKVcz\ntv/FelNOC7cQLSfiAWFNY9v8uzU07xVIJ46kEnT1PlVhqyH3ZQn0iLwriird\nslsl8hZgIrrsSsQPCy7O+2B1buQ+/NWRJn8RJCXczTTLGU04gzUeYrqjpMTF\nJGej//kRDVA7/AXIfjXcrrsMvVog/wqNqNMJuZrB5UbcSTeigccf8qJjowjX\ny3LwF18jiwcaUJUH9VFQDckRIypR51CI4miYl5FGzhHdXgeVIduRU6lMZayJ\nnOFsrMkwRgiOK5uDXLtzLNw6KSR4wNtB6T9DXiVX1xs8na5xgqd4Lndd6H0Q\nuyw8VVSGM+BlPNvHnS9T3VWbr9Y7gsJ0dYpL40O8FQ8JZVMMYdUCiX7JUOHs\nLVaZY07qn4RcT9II4acwQtYzOPfb9M1SXpBDUGxfs8Nu6v77Jq/F0LoHrOz9\nOzXO18A+bkuvl2BABbgcKp08brQ89+XQPqYgYNhtQvHUq0XzfQzXO+F8w08y\nNQNQ12crPXWFbiJufEXCxbG8kFvqxIOHDYQRDt0PlgkF9wE6kWLyglFa9DYj\npuZB\r\n=bgzo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCraoSpVmU2x213ozboLYkt9dSF6HOh6B/oo7eQSr3X7wIhANWt9/E3Tb+IK8AV+sthsBJ+Cus3V1lZWbuxnFv4mNvm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.9ec431d1.0_1615501996106_0.5358399031323464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-select","version":"0.21.0-canary.4246c082.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/floating-label":"=11.0.0-canary.1e0653477.0","@material/line-ripple":"=11.0.0-canary.1e0653477.0","@material/list":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-floating-label":"0.21.0-canary.4246c082.0","@material/mwc-icon":"0.21.0-canary.4246c082.0","@material/mwc-line-ripple":"0.21.0-canary.4246c082.0","@material/mwc-list":"0.21.0-canary.4246c082.0","@material/mwc-menu":"0.21.0-canary.4246c082.0","@material/mwc-notched-outline":"0.21.0-canary.4246c082.0","@material/select":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-n3/DKfFG4a6rj5yyfaJ7DiLdWoDcihTaXTj7zBacl51MNGBVFOdLdO6z0CGjzyJoWqEfSYYdLjVJdJd42PZbsQ==","shasum":"39433ea7f02109dac7d14224e4d028e9a3bc1f7c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.4246c082.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpxPCRA9TVsSAnZWagAAMRMP/RS47hxSithiH1g8G3jt\ngzx1rlAN5Jlss85si6JCbsmW2uPV6AAtHXn7mtDuUKxCIwrZ2G8DNRbGWabR\nMX3mJLNz9ZUfs0UxGpVZqhRH+ATdQ6UeBMIoujZ2kU8auxQ9SnZDjq3tVd5V\nFndjnNzEs3HIq+7DmBaefUX9glxcMJklCTViVa9Q98p2wKzPviFJa6y2mcRB\n8+QTD4gIUoiewIG1BJPrKvTy3OBlx4cwOjqLbKE3B6Wlh/CWwlXuBcKahyPQ\nEP74bwHLul9khc/uWgH+jNLVfgMC+PrD4ivLYzZkFjIDD5NCFpzIuLEuxyWL\nwIPWU/tOC3EDldSnEs+txBqSUQmEl3Idkuikgi+Kou9sQC1ddx1rk79LJAzm\n4psledrla8sZq+OxtMugM4juw9MBWwCc2bnW/q4U/7EhuaqTt74J/4/EgKBV\nDPAg0tR7cHL+SRso0lWLEHBt8RJ7uCBiDD70yCXQeAeK9jXL6XhYcHjwRkJh\nw1NVR2O7n4mS2sWGQ72oBCCA73fUap9lQYQw/SLlJbP6vdMHjzBGoqMgjfEG\nzGAssoXLA7/zF8LPqL/iqURrytcZeaoBM8emt6cmPE+q8g7h0lcIeDPSyL1B\nf2TYNpz1fxRuNGxqYy0mUkApw8JWdUERkrZuanrZfoqENSqL3LJVol6lYYqw\nuVo1\r\n=0317\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH+2tEm1L3sxuw2aio41UOE60OiB4x+FA9yjarA7vyIgIhALbdolr6Z0Vc0Ww4xEfzTtUh5axF1706aYijK4QKO4uG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.4246c082.0_1615502414970_0.027279467980847905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-select","version":"0.21.0-canary.2d736253.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/floating-label":"=11.0.0-canary.1e0653477.0","@material/line-ripple":"=11.0.0-canary.1e0653477.0","@material/list":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-floating-label":"0.21.0-canary.2d736253.0","@material/mwc-icon":"0.21.0-canary.2d736253.0","@material/mwc-line-ripple":"0.21.0-canary.2d736253.0","@material/mwc-list":"0.21.0-canary.2d736253.0","@material/mwc-menu":"0.21.0-canary.2d736253.0","@material/mwc-notched-outline":"0.21.0-canary.2d736253.0","@material/select":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-E80f8fW9gYMLY5LDz2kEHaZusWBy9QKiVqwcygJJiPpPCD44xbn+LnFNxf7ABl63nu1H60A7K2UPkEw5hUfB5w==","shasum":"7ba89844a8b9e0b222aaca0548977796280b9d0e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.2d736253.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+F5CRA9TVsSAnZWagAAMnUQAJIMGMSXdJT/+TdO3Us1\nH3TlsHmD7XBgIY+mmN1Elcyi78FvcJUuNzlFcW+4hEeTe3ut3tcBFFbNb0/Y\nreWJ7hp+ItH7Falo36pB6C+t/bC6pDUy21E+M+8uOflMK0FsdFnohcAAtbGB\n/LOjHON0Txr0w8LPRrdWqHasvaBUW43G3xe6AjKCLTrSd7zcZBqN8RMfXM/P\nP6YAhhqhPLyopBWHJLARG+mIqzeasT7Z6Fof/Obv/auQV9baTlncCx6hoS63\nDuVfFUxjaX7dezoURnlYVfXGJYcogsNASUmiaasbcs4N8zCsAT+cv276gqEd\nj1aJI6clvAXqQnoo50DFCdrl0lpdRYejJIMowawLhZUDQkXJcyO3ZQGjKXNa\nYzZHnyFLUdLOhXIqDwhRzXuqdr1XMk/yQtwG9LePMLZg07/v7EougryITos2\nDofAVJuLt1WebckhzXSP7iDcgkJZ3B+WE3nj56oaikzf8KBVWNA6vTjdTJda\nl1OldA2ftqhqa9kzPLg6ggKOAC5aY6hxTFy6ungUMDZQj3WTRnRY/bNK2uu8\n/T3S2NRPjbE7CMnLp2NTE7K7cwh97QuKE8EuLHnIAD/o7OxWioYijv1IBl7A\nBwCpKFKV0QSxIY9v+QKNOmruCWctg1wEp90OxtLOYP3Mfq6ZI9uhuRQ6r8Vb\n+B8t\r\n=Zvug\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvBtN6H9DHTYUZPLom3gojxInodle8wdgqNLZCZcT1xAIgM56+FizNJYbkDiAflROgkclfAoIboI+LGfslIE94d8w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.2d736253.0_1615847801466_0.014288627036115997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-select","version":"0.21.0-canary.7033124d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.73a227194.0","@material/floating-label":"=11.0.0-canary.73a227194.0","@material/line-ripple":"=11.0.0-canary.73a227194.0","@material/list":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-floating-label":"0.21.0-canary.7033124d.0","@material/mwc-icon":"0.21.0-canary.7033124d.0","@material/mwc-line-ripple":"0.21.0-canary.7033124d.0","@material/mwc-list":"0.21.0-canary.7033124d.0","@material/mwc-menu":"0.21.0-canary.7033124d.0","@material/mwc-notched-outline":"0.21.0-canary.7033124d.0","@material/select":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-U9a/NnFXa1JkujDICLC3H8VS7WIMIsABFVPNYRJy0+qhkZxTSqMqI0FGVwj7OZGqN6EwXwMXTpRMSOH7JKZQGQ==","shasum":"002059e265f3da935268c76989fc8a8972d6810a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.7033124d.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPsnCRA9TVsSAnZWagAABvIP/31Y2YrZwnnj54Iz2ElL\nSRgfi+2xcGj7ChKo2uQF7X1Ro2iwNnrBqAFN2RYWeyaNcSakCDUDuamUG9TR\n4XcBiDus1LLZFrWLIqu0P60f7iU8HB09NGYf+5DAEDr4hR+VNf2gGdtl4PfZ\ngy/UTJyHV2GqbsMSWM+pMxQJ18UA98+/Va/vank5MJTslHxnQmZS5nEDq4zf\nIMqmzts6eCTGAWraFN5zqeKlcUpLnZIvIuML1bcerw9Q624wQYIJshL9n69d\nGi0fzBGoSWr6XlVYn3xkybeEmKOxAV4o32xwmgGshdFfOnZY18G8x2SqM42R\nl7MnLJ4/GwSnhiMJAPSXKY4rMNNxSkIkJnbNnJ0+gHfruabulIH/8wPixgQS\nK39ed7tHtCPL7dCVNrbZJIrEctLKY9pd2SX3dk7opvljFd7u73zmKs3n4DjF\n7EdUjD4lb00XVanMjDvi3RdjsWeUepstNzI6WfQrnhN11c2xxvmdsyRw45mQ\nFbArvPw7wyWYPCnsW8rEMP4zt/PH1Xwx1dGRvNOHSp5kgGRagVbRGo8EdTHk\nJDy8XSYXesIFwTvLdd4Rce2RymQRcXlymGkG/fbOsaXm9drO0za3yCbzhkH4\nnWvhps7CFX3nGjRS5JRvEHXw+L5IO1La/CH+yTAu+2vFOa6JEp8YoPBhXC5Z\nKowh\r\n=k1I+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCok/bO6ouAAD8zgFO8U1Iyq0iBS4I6diN72jg+N+lhAiBtTHk3cxM66tTFtngxyAgMFXrYl6+AtcPYcXYwjj5n9Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.7033124d.0_1615919910856_0.09235618742697804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-select","version":"0.21.0-canary.6c0ee901.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.73a227194.0","@material/floating-label":"=11.0.0-canary.73a227194.0","@material/line-ripple":"=11.0.0-canary.73a227194.0","@material/list":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-floating-label":"0.21.0-canary.6c0ee901.0","@material/mwc-icon":"0.21.0-canary.6c0ee901.0","@material/mwc-line-ripple":"0.21.0-canary.6c0ee901.0","@material/mwc-list":"0.21.0-canary.6c0ee901.0","@material/mwc-menu":"0.21.0-canary.6c0ee901.0","@material/mwc-notched-outline":"0.21.0-canary.6c0ee901.0","@material/select":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OPeGjuR5JlfAmd3/zkk/Ta96x8X2a815EInckyHnsPC5JvUYhT3ihsKmIqMmNPODpLy2H4xAJK1mt+5vArLnHg==","shasum":"05dec1b2f915cc31f525cd90b35b96ef27d6ea56","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.6c0ee901.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTO7CRA9TVsSAnZWagAAVTEP/0iJ8cHui5ab+w3JeWqb\nsB4Nzjdf5PmPodkeUew4aUsQ79zxpNcjXzQZy+Z+7dHHpM+LvgjQDZ6HlTPA\n1ExGjkzIUwauNwYEM2VmBTIKBhuP5usoSvYcgUWj0HmHxckbzlvQs2TJrNfP\nJbsumRuWXeCzgh9FC4I+gUBy9FUXxplMWVnsgev5yWHIXgvo2HeyDV2a07TW\nf1a6pWzv7DSdh2KyEf3AKeA7vcVxSSBmG0HgE/eBu3MQzRmQCMhWUUGjf9ka\n2tCS7Eiu0ZqE7YWkJURRbp+HdO6zRV48uN3kxYaDhfpvC1Hhr4/5BMlwm4gy\nbdNP27A5YDl81J6XUffeQ1mGNivLJ5HKZ2mkIi0+UW4pjNnDOj3sU4bPZGac\nUIpiqyDn1E4QHMq5H03WwwQV2PUF0kZyPgU1Gq8f3wcLl6Iu7fbW6FzlNIRG\nxrUjrBGacJooRaKXipaQdQUj/+ApkFPpRETmEKPbwb69qm7DtbJs4YIhW012\nQXZC1yDYe6HL0EG8hiRcka4BllrI6IT7b1+SXiotfSabAg3FCXZfW6MeyMnh\nRatEG9a3CeYHemiVpqxPHEidBcQrie6rbps/tqXtKZzlvdt9AHRINd9lMKFA\nr6mLL1sRVHOYZ9olHGKDXgll4IwwctFNwJ5mr4KauT9aGifAvhH+MQZJPFMn\n+u2e\r\n=iU2b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEeNJlIpQfUkekH3+2s7TpRk3Ye1MQ713M3oQXeR0NSiAiApAXcZ92qgU/rxK3GthPtVua7PtC7s0jUoNyH3fB7smQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.6c0ee901.0_1615934395568_0.11041297200721267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-select","version":"0.21.0-canary.7f0d605e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/floating-label":"=11.0.0-canary.941ca3b3c.0","@material/line-ripple":"=11.0.0-canary.941ca3b3c.0","@material/list":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-floating-label":"0.21.0-canary.7f0d605e.0","@material/mwc-icon":"0.21.0-canary.7f0d605e.0","@material/mwc-line-ripple":"0.21.0-canary.7f0d605e.0","@material/mwc-list":"0.21.0-canary.7f0d605e.0","@material/mwc-menu":"0.21.0-canary.7f0d605e.0","@material/mwc-notched-outline":"0.21.0-canary.7f0d605e.0","@material/select":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DvEXHm6tChEjvduXnd2Yb2u4XZvi8//ZYifBtNNk51vVmFRGwew6VVG7alW6yblO5H0KDvAGKu/i0Vysk2lB+Q==","shasum":"cafed66aec7a219cdbbf040ea9500776fee34900","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.7f0d605e.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkT1CRA9TVsSAnZWagAA0bcP/jBBtZZaaT7m7TJ8h1Nd\nzP2kNieJNjkMZsPDkSaNmEoBCob6P0s9FUhSBBNsZAjcyxAe7YHM/tLZ5RTe\n2aQ6V74OH6w17wVzL4Vm73J4YG9tkS2Hvgs3h9nayMrByPZD2VQoGoilpkFW\nU2xd6g0PGVSLkdWULYJq1uMD/thk7A3Sv7j/lvceJvKXVGAgSWlfP8OTVNQh\nyBXkYMU79NZmPs8PLckudtIrtsKwl4IYOn4ToJ+DxbRSuDCg9ltkM4iuxPbb\nuGR2Qf/aq3qBbAQdD8h72IxLahksqEzzMGEGYjTPkkYL+PIja1Mu93i6oB/g\nZq0eWMu9DnvumXLK2r0y3ySm0RxJo6dK8nPfjodadIqw1HxpWBwGwhclsmr2\nAVF7Xifs4h4SglyqumpgMKaw0MYRvm7XfcZcB0zQ8AJNqt66BmWpPUOkhpm/\nIMxiQdGwjkzHN/6NhI2SmezUmgti5h4Bt2RQilkRUhV+q6PcaSwQ6kf9DBHA\n0QBCPCH8Xm/1ZSWjYSQjol69vEVkQ63R8VJbquSPWxAEgLRbZlpM4PvTi0/p\nTZ0hzxWITQXF/liu9O8J11YtUGK3L4kAfF0wkuWvsZ3F1G3fsM7RC8KTQCLm\n4YsyGP80/C16asEbcQqkYcA6IOeF0asg+TvYD9dnKdjcb8BGhdk7uGdEBOla\nzGbc\r\n=JYu/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDW+Ki9L5qeL+Z8rSqT9LvOyZvUPCWylsdot5SLXP1RewIgHytu4sQ5VasEUdlqgwjNpM9urEE+Wb8paXM0s1W9NlA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.7f0d605e.0_1616004340872_0.34604603644101717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-select","version":"0.21.0-canary.572107b5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/floating-label":"=11.0.0-canary.941ca3b3c.0","@material/line-ripple":"=11.0.0-canary.941ca3b3c.0","@material/list":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-floating-label":"0.21.0-canary.572107b5.0","@material/mwc-icon":"0.21.0-canary.572107b5.0","@material/mwc-line-ripple":"0.21.0-canary.572107b5.0","@material/mwc-list":"0.21.0-canary.572107b5.0","@material/mwc-menu":"0.21.0-canary.572107b5.0","@material/mwc-notched-outline":"0.21.0-canary.572107b5.0","@material/select":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XN51MMDpALSmI69mTWWQYGB4ptc9FjULEFEZllnC7FzF6yueyF9nrPXG4mHJNEFqyV0bRVlImA9sfmJsowqqVA==","shasum":"e4a7e462ba2e7b0cfe37baa7333125805470e533","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.572107b5.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+hbCRA9TVsSAnZWagAAeoYP/jFWE5X+a6X6KOW2TXZo\nQTbOu/3GI2sWmcP0nvmhnwFE3YXh81FI+vVcu+ZHh6jU3dYCZUtwOg2GSCtt\n4SkZqorM0XV3QAAHvikjlKa0+yh16mfUomEsvlZPzb+/I/YR2MrBT3Bsr0wZ\nxQxS82rQlM92LGb9YEZ2GLdWxTIIaIDG9baPveViyw/9xdTEwIv8HwlUGwe/\nkZ1C3mPJiZd0atJEsn93SnVJHfAVH/MramTZBhAGLydIAhYuSFzmZDVtJyxA\nKOIltv6y2+lgg5Nqm4vGqT8VQpzW1nXsWR8TSN9Cp3WyhLVpQ6SFiB4G42gz\nV2c0oVkleKz6pacC3fMe0+mIGw8WJmxtCRwPJx+aTTWHzIWOkCQCH9k/k92Q\nXGa3i+q/oCPccz2RC/wdtFm3h41DB2Zb4eph01jna+8VNHxQKW8NAGQM5Sol\nkOs7SITK8ZuOmvIEUHj7drFyut0iQ4HsMvFWn/rMhCS//po2SFgrXkNMeSxj\nz472fiODuxY5DpCJRwiVyi5iXQze20rsbSAvDUB8ckt4gMAhnkKL0wT87C7l\nTXMf8yKomEnCWMI74deZBymQwZQfv3eFZER3pomIkn8Um9dLOEE9vdFknNNq\nuL9Rokm8LYLu9lTP+z5RUOA9eU8+KxmyvWWI4LkSMAx7r5HqwOSLt/U0VHqA\ndnNR\r\n=EBRj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpmij0EFLw3J9LcCMNV9SgUOPeXbG0Szk2t4CLblM2wAiEAwS14rd+ySl3rbVST22wvjh1Jh9df+WLMtYB3Po+IIBo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.572107b5.0_1616111707244_0.08622017811725224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-select","version":"0.21.0-canary.b7b220b1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/floating-label":"=11.0.0-canary.941ca3b3c.0","@material/line-ripple":"=11.0.0-canary.941ca3b3c.0","@material/list":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-floating-label":"0.21.0-canary.b7b220b1.0","@material/mwc-icon":"0.21.0-canary.b7b220b1.0","@material/mwc-line-ripple":"0.21.0-canary.b7b220b1.0","@material/mwc-list":"0.21.0-canary.b7b220b1.0","@material/mwc-menu":"0.21.0-canary.b7b220b1.0","@material/mwc-notched-outline":"0.21.0-canary.b7b220b1.0","@material/select":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vIrZvmAYITKDKIONjWLhtjxzDE7eYQX7omcA4jZILQsdunRJpA5ulY3wCf7O5JlnSt62/rdTlekoSjHxPR0nSA==","shasum":"d02e00d4b80e02e0129674cbdc03102ce8a8f6e3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.b7b220b1.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+5mCRA9TVsSAnZWagAAnxUP/A87Xa9yFNOa7X7nrk1M\ntO0Q98yQEz6+3cx3OmeoiRFFsig7486Plhw/RuJIzdB2F6Hyd8oXYXgVeWIx\nL8/xNTAZf5bMCjy64yGQPut9AipnQwSWkYhkBto8HBVPF8EhRWN95MWL+qrA\nvFd5xHwbTxtxFkvaw7wVEsYZ4hSFYb65s0cisYiNn4LCwxYfvAm/K5tgSUfJ\nPxSrRbOJonPXXBQ+z4XH3wCvcfPZ59yt/Ba8saFMAr4eGM3zcbOFY8Fvx5mT\nyJcwNgzIdDAUOO0vGUYzZsCdECdFWJhf+Hc3dkDreETkIgdz5ExxwEQztKj+\n9YqCpzq67UdmgrFRalLfsxqifN9HdFPfw6dB0/rh6u+ZABKsrWYZ73EMIXV7\n5RQcdz2DYgXGYEuGhuHq3/S4agZYIeS8Nn49l7FZZSVZP7uie9Wz/oQn2gE5\nqXy9RmSir2ta9pEvdEwn5SGcUiUE2NnxZbJIz4ncD8OWvsHIMjnKoFkSJPb+\nbkpFCwS5gBCfadk9W9cGTvtjVHItvd6Ejis+lRuvHuh3c65u2nhPfazHjrzX\n93EhHeYY366yFohw++Lud9KI/Vs0aCoWOL8lNTMJC35tXH0uc6ikQDtC+qpb\nmKqKyZejlKKFDF9iRPGwa8OgDLl3T8WLbWYGvKi77VIpUAC6F2scydP4iFj2\nwz4x\r\n=T5W2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOGVmgX7pEXQJ+Xlp5jykPhj+FuwvHcv1kF01WBlAcdAIgSXY/3k/qJBp20grwwCWnK1+1CFnmKxhr8ItoKpbMwp0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.b7b220b1.0_1616113253517_0.8484535681655778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-select","version":"0.21.0-canary.233b2de7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/floating-label":"=11.0.0-canary.941ca3b3c.0","@material/line-ripple":"=11.0.0-canary.941ca3b3c.0","@material/list":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-floating-label":"0.21.0-canary.233b2de7.0","@material/mwc-icon":"0.21.0-canary.233b2de7.0","@material/mwc-line-ripple":"0.21.0-canary.233b2de7.0","@material/mwc-list":"0.21.0-canary.233b2de7.0","@material/mwc-menu":"0.21.0-canary.233b2de7.0","@material/mwc-notched-outline":"0.21.0-canary.233b2de7.0","@material/select":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4Ae+5HqqqyOF/VLFrtxeJI/mtELEhVq09FPTS2pJxVvTS00TnU4FGwnzTDG1YqE9G4iTKcvY7BAUQNUoBJr8ow==","shasum":"d6727c2b97b7f530fe7d93298d7f09c934ef00a6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.233b2de7.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO3YCRA9TVsSAnZWagAAAfkP/1DVMfvXMOYYa43c20CK\n/D3VFP4d79U/G7kh9Ee3J2gZZlBRx6sZEWvOrsLg7mCvILvpPfaZRGhNGGjj\nX1S8rGc9251q64Sdk98Fm7ZET176DbqXI8D99N7uW/8qNQ6yW2gocXSSiefH\ntyRtCPRdxJeAD9YGjvE3pYhlTQ+WcKnsWVoBNhGkK3Ia3yv7f6bB0B9AHsG3\nhc+chXDvqQXf2H1TpCQIto5SJFcIsHPznII8qE4pbA8+yWYTYNWXzxrwOOS6\nOqFcoD/33WgvJ16LBg7KzHC/MAXHMlSCZ+wr7kL5KLoUxVxgw16qzwZktNoR\nLO57ltROIEXLUS+Ij30j4bqkz2vaErsfeUxDvEFGRQQVKexxorw/b9dtPSlO\nhA0nQT0sX1ybIvc2Vq6OJavUbqZYOLzyS0tNvyxBxkEs7S63hwQq7zwiJsec\nXavp+c+TsKNCEqbJgQ95BJHZcscNne1CpGdL0zPkXUC9XNAOWphM4wcLxWQ1\ncpmBoi3GwbLgmZClANyakcW5HA2D5NXEA5h991yGqnUB302cJBm/MxU7TBhs\nQeqHDgofO5LdockipbfiWOsoGPj2lM1PldLwWMhfdCQihW5L1LNvYc1KsO8P\nkYI49an+5wJSu3ZV5XYgqrX4gKN6MSnMaO5wCz+sNYAIJpdiOtjOqgpox/1+\nk5Cx\r\n=/cG/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuryF1/q4bfpYukDuNN1GqJ+ZtR2St2/7QAL40tyE0MAIgMjx59G6n0hLmrVFVT7en4/12cW4SF05G317FnCaVryY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.233b2de7.0_1616178647833_0.4753226649523188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-select","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/floating-label":"=11.0.0-canary.941ca3b3c.0","@material/line-ripple":"=11.0.0-canary.941ca3b3c.0","@material/list":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-floating-label":"0.21.0-canary.0c1a2d97.0","@material/mwc-icon":"0.21.0-canary.0c1a2d97.0","@material/mwc-line-ripple":"0.21.0-canary.0c1a2d97.0","@material/mwc-list":"0.21.0-canary.0c1a2d97.0","@material/mwc-menu":"0.21.0-canary.0c1a2d97.0","@material/mwc-notched-outline":"0.21.0-canary.0c1a2d97.0","@material/select":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MBi2r7gu4zoRPF/Tb3CTRoBkeHtigh3iNXA0Livp/nArOSJ9YcgnfGkFCakjf+YJAFKga5+ijgtIoud+A0JLyQ==","shasum":"75eab400610cd06e6ebe1f29a1646a4fede7fb60","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.0c1a2d97.0.tgz","fileCount":13,"unpackedSize":210090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRYDCRA9TVsSAnZWagAADnsP/01hJgXYqJPYyVvF5uE9\n84wh5DOzG5yNaDxp+tfgd0SDt2Kbyo7nYmhkqUi2+Sv3/AACWMmxxB0k2O/K\no910WOyEmpJ5NAHkBldzX60MefQ54iVq3t6PnUECyT7dhGDt7AiW/P60esLc\nvLoDqCJ0XdWOhqJ8wtLf0KAOYP5SbpJ8vMnJ+nLs2/yqpdasmM6ZKUHTATV1\nJ7jXOrp/k8RITReNORGQtGgLvOnPCySLqjoPx7EE8gdw47qjnan8x/1g/7WQ\nQc//hpyfKr5oT1oi17uCi27Zc8IOCgx2CdfY1fGL8q4emJg8v0a0pv3ZuHPz\nZlpxDvedG6GIn+pu2JFUqIdyQgCcdht/V+ywLbOCZd/ke2gd8b/fKElB/4Oi\nFaQx0MyxL4563M1y72oW7KpSpq+gMtna5/m0kI3xEIXsJM4ud2ScExyO4g/c\n3P4jebS3tQigG4kNMtnUhy4KXqrgFdBca+zXEC0xpY8ZmkUDy7aR1jiCD3mu\npaujDnuk+CClndy1Z3URd+2Q1nRcRQL0fRvWMTybxHfhKkFQL18eOz501iEO\nWLcX9mW2uFVxJvPK5hbzYY6VGLbrCNVwp84T+tOXdibwpPvHxURhuuGor1ju\na0YX/yIx4P3OTa+Mv4s1Cf26MIdrNl1x6MzWQEeOG6lO0GP4VnWGAE7xeK4u\n2jQC\r\n=X46i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRK/iMJv9T9loINu3S8h7dM7VTNHRAINA3X/zlGqrWIAiBZX/+KyzmBBkDO+fuS69YjYoGrVNrVIN+6OrLSofP/BA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.0c1a2d97.0_1616188931425_0.14751430518353548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-select","version":"0.21.0-canary.57ca2e73.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.5f0fc444a.0","@material/floating-label":"=11.0.0-canary.5f0fc444a.0","@material/line-ripple":"=11.0.0-canary.5f0fc444a.0","@material/list":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-floating-label":"0.21.0-canary.57ca2e73.0","@material/mwc-icon":"0.21.0-canary.57ca2e73.0","@material/mwc-line-ripple":"0.21.0-canary.57ca2e73.0","@material/mwc-list":"0.21.0-canary.57ca2e73.0","@material/mwc-menu":"0.21.0-canary.57ca2e73.0","@material/mwc-notched-outline":"0.21.0-canary.57ca2e73.0","@material/select":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ltD8CXPC39F5UXY9JLyf/V0Q6OePoQn+9JKKg9hxAPwWha2Y73/vTiZMm/o1ltsqfiwX5qDsUHwowxbyIo9n1A==","shasum":"1d623fab04ce966e8a95088423dcbcfe86ef577a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.57ca2e73.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSizCRA9TVsSAnZWagAA71kQAJ9xr3xnQQgbGExV3Tja\nNRq2KCBHcf6rrlUeE/cIYuSH3Jr2xBqmWekNmh8XDcbE1GLA5lviwUq+U8sL\nQwlUR1gaIBLx+83AqqDfX9qhKXh1KA9c0kG40JKNPLMykOCZSHWedPow7STe\n6NCR3qDAn7ly26srJcELDRoP8YKuJ3qFUPbYaHBnwrsLMy3xPKL4D59ms2v0\nPFQZ196rOhUype0ijJ9paOqyR/GfpU6WHwWgC3Nv/mxZ8Mn737OpswmTDtlE\nJ0WRIjzbFjSNm1YoSQMIWz51DJ53oEOvO07ZSHlhyPcFUsHfVzv5g6GDjVYL\nY0PoJvrzYTXIvwU/Q5towmb/M8I/AP32BKfIPB4Gj3y5Q7O7/t/s4yGQXWD9\nTSdsyrB+Wu64YiXdM4pE80T5C6K/3xZ2f4uId9tLDGABH4uvFQ+/w3rmsV5H\nyso+1PbrvrTrcUKGXWTl3I8p4zvyAq8dvBhXmExdUAYBZDLQZvN1Muy9FET7\nkFM/1HRHhqe3jAKLlQ7BtdQzK+270cbr9bMuBGggowi6/riXh6SAv5ySRGfO\na/fjbHrAFzFDFQHZfrecmbAEjZAnDvOwwpD6X5hvRyJz+Mts0RsNhTSKJSSw\npQqhIqM5xFm1w0ryGULPAXGF4mqwIkUxqtGXEtPLnYtMEo4ObR+Lgw7CaZLB\na55P\r\n=M+6/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNRkNsy8ZVEMvmV5uuI+Gd6PXXGVf5Hljcz0Po5dZrvwIhAIDW0IG1YmGvp76QHyVtP4B6A5ficxEWp2LMcvoVm7j2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.57ca2e73.0_1616193714875_0.2985729264576056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.5c058f4b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.8943b991f.0","@material/floating-label":"=11.0.0-canary.8943b991f.0","@material/line-ripple":"=11.0.0-canary.8943b991f.0","@material/list":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-floating-label":"0.21.0-canary.5c058f4b.0","@material/mwc-icon":"0.21.0-canary.5c058f4b.0","@material/mwc-line-ripple":"0.21.0-canary.5c058f4b.0","@material/mwc-list":"0.21.0-canary.5c058f4b.0","@material/mwc-menu":"0.21.0-canary.5c058f4b.0","@material/mwc-notched-outline":"0.21.0-canary.5c058f4b.0","@material/select":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+1tXLnWv6LKKW94Fh+pWU97YVBer2OHgf/ARbYwivgnv84giIm14RAJ6a4EfF5Dz+Ze33cPSE72h/qyeGzlmJw==","shasum":"a4594e46d8e5cbcca2eca43d3617be9fc8812005","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.5c058f4b.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnUfCRA9TVsSAnZWagAAjUkP/iQhoPi7PjmxBitTFe4O\nIHD1KjlO02NTdnb1JOa7zr/8QXL+S2TYgKVbtalfCDBnlFkT0vMFQJYYzgrD\nLePm87hMod4sfBb0szgNsqGKImuUIcqf+F/+j7O6GGb6sYa/9gHta+vIPA0m\nRQOp2as2MExW6uaJDxSVhXfb+QF7AKd0/CiZqegXD2TnBb6boI3HTUZkVE6e\nuXBdk2GcL/Qb+VNnaj4LlpCQWS6D0CnGTn9ATW2HFhKbXwCKVLM6mtaUWXPa\ncuet/rOIPrgKTXzK2npOy1asB8xtRSeKeZOjfpqDh+xjwV/rMTocY6/AgzUb\nWI3WnSLwDvqw+HIPjCTpoUB4IGnPRG6lg8o3XifmP4+FQYly+9SN/4gVfmse\nbMhepeNuJfjJaplj1+hUrIWrTWw1Fow5gR2MyLlPme0y9e49HLnG6lUAHWbB\n1O+7tT9h9713Q3qLSPDo9IFLLKQcpiIFEyiPIya9rzUdsu54Aq13dnxJCFQb\nLdX+Q1J+DY2YQUSNgLHqHyqNu81FyjG9HmxjEIg/FgeE94P9gjtlYlqOXFNQ\nWu4CqqIOPeYqgWcPnP519BKjNmXO0gsOiKW3z1fzQbkd2sXcE9Bdsy93uejd\npxBsdWvy0W7jr1dxlet25wGs8yaWQqlJWzf10xobLeOLgf+P8aRh/0/xU+Cs\nwL2T\r\n=uv/f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbx1caw6o6PHxlXHTERpMy/7bXsdNr4ygiUHpaox6q3AiBvIn93mQ6/2Gtf+f/GyacZyJVVuCNjXdd7/paz3ls8iA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.5c058f4b.0_1616540959580_0.6456174353850694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-select","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.dc9c84023.0","@material/floating-label":"=11.0.0-canary.dc9c84023.0","@material/line-ripple":"=11.0.0-canary.dc9c84023.0","@material/list":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-floating-label":"0.21.0-canary.e27ef7cd.0","@material/mwc-icon":"0.21.0-canary.e27ef7cd.0","@material/mwc-line-ripple":"0.21.0-canary.e27ef7cd.0","@material/mwc-list":"0.21.0-canary.e27ef7cd.0","@material/mwc-menu":"0.21.0-canary.e27ef7cd.0","@material/mwc-notched-outline":"0.21.0-canary.e27ef7cd.0","@material/select":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6B3TDoIyke7pDCzbZWwCxzn3W2+pkxAtKslxY6zMrOsZJZIveYhV1RFFVUpAVOxR3bK4e1yINX9RveQxmaC24g==","shasum":"b8661f62b3c4a75556bc13bdc6cd9adf801b6629","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.e27ef7cd.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4YeCRA9TVsSAnZWagAAFtwP+QA2X0FfcXC+oo2jhOEx\n81sGr+o5M2NnmCQOe1nwXhDkiL0DQUrbbiqtaarEbdthPO0gq0zqHLIcyH2K\n4/ftX16QTfGr+HttHfZONV8RrfDjYRvUB8xNHzICgaoT6BEBtwGOW2fRv15F\n+akW8bp56h51vz9hSzxl4m8IXAnu+8lrvGF4JPYaQp4OwNQYe3A2AOgtTXvu\nMylpSHISk51YIwoqsZifwyF94I65MAzBhTTOTcIlvszeHK2bqGnDdLDWwyx/\nbflk47SzPkA8bQX3PefgsiDkJUkJvK7MI2UIkpOFbACNM+eDlGOLHWDgGtN3\nECVNKCTcTfEkDr6MzauFC+QSF+BBVG+zKLnK2V3re+P7dNRSFYOxAnzFAeCG\nvDedZTelaenRH5krpvoBC7pb51dB/xT4edIkBXgzaaOZl/N57IVapnDtwyLC\ndh/Ggf4hKIoOtI4bRW4Vf+eVCN5YfgIwK7UJ2aESsAeUPGlDmhiV8jjceKGd\nLzQ2kQR6a1S4UI/TIyn28E7j+dW064vuuGtWDilvPrGheOgrnufsEA8vlDay\nR6+42FiQIJ9jGjo0fQNhoSpx5GJHprF82Aao0ofR9umULjZszXrE5tDib/BT\nNCyeYJHS6HwKzFNW3bFx2hmHAb44R5Fa+qGDOm7wSVCaKaIOLLrYl6YVmrIi\nbHNP\r\n=0dea\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMPbDC1Bt8RBewfhYDNNcw4SmKqPiXg99bNKJKZipbtAIgXj2rVC3ziDZjMUhCQkXD61t3QwMqUH1vqGf6ysIxkag="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.e27ef7cd.0_1617135134351_0.13960230963144427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-select","version":"0.21.0-canary.15c09e74.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.dc9c84023.0","@material/floating-label":"=11.0.0-canary.dc9c84023.0","@material/line-ripple":"=11.0.0-canary.dc9c84023.0","@material/list":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-floating-label":"0.21.0-canary.15c09e74.0","@material/mwc-icon":"0.21.0-canary.15c09e74.0","@material/mwc-line-ripple":"0.21.0-canary.15c09e74.0","@material/mwc-list":"0.21.0-canary.15c09e74.0","@material/mwc-menu":"0.21.0-canary.15c09e74.0","@material/mwc-notched-outline":"0.21.0-canary.15c09e74.0","@material/select":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-fHpf31U3TtgYSV+n2CYPBnmDZnaBmAx3EI8KjiI3Kp2Uk4fva16Y/1BP49AFWLiNIPp0ZmuoRayiEPfZqN6+dA==","shasum":"36f936f484cd380eb23965fffecbc721fdcdaf9a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.15c09e74.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKflCRA9TVsSAnZWagAAo9sP/0ed+/gtPKxoOB9rM/Ae\ncgyOQ/CfVFp9i30Phtp08uGWkwmWEzW32s1i1m/+9roeQbiWuHjwm0LVL4fd\nSafuXM3RI5s7fWlim2fvEbPYqKQPk9gBCZsm392IDJDIHM5lh+klow0rFKhZ\nnWfPX7rEJLwWmZz+dCQrqvD0yFPU1wBAEvWHUBGadv+Ooh1TfHFxgtafBiJT\nOaLsDwpO02zkSAIfLC54CWHZhU6X4+16cyPv5wHV+dvk7quHPjVZLP+H8EJm\nbPTjdDL8VsHSY7VhxsvUvktQLCrXlFKClTDUwSuKaqqtJHnk8qWBfJcOEFzB\nhDql3z7n1EF4B7Vf9AZ5rYc6JdnBKNNgtuW3wjLYKf61sNtnZOyJZw545qHf\nAB7rHZ1JKHUS1xXkqlmXFjm/wI/TYMWFhh4FxQn+YAZj8O54q4WeFBKu5rI4\nf/+JJPKFNDzfqHG1+af1N07MQnYJEWjHL6OZQx4kb7u5Jb5//aHmHeAhsSeM\nlh5XKHw33+mOODvdfMK+lxBytQy6EHePzO6iq9gEYSaKUwxqPmEzZLAx+ggY\n/yTSFwIr3bScR8/OXd5xyjTl26RCIfIuFBK88bz1HL8WPZL3yszCpKoslN77\nESQuvCOhXBZAEy4ykTXj9ZeCPz8nuKlVz/UlEzmRmc4AszN+64i6yHVeqBQH\nKRnI\r\n=bTrL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjr7Z23B8Uy8xa9uU/XsL5E3j3ANZakv+hEftyRT0SLAiAr+RWo4DQH6QQwIEcjmyeLNx4QzIEw6aLCvGw7z445ew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.15c09e74.0_1617209317035_0.9298653993995776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-select","version":"0.21.0-canary.4dc32be3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.dc9c84023.0","@material/floating-label":"=11.0.0-canary.dc9c84023.0","@material/line-ripple":"=11.0.0-canary.dc9c84023.0","@material/list":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-floating-label":"0.21.0-canary.4dc32be3.0","@material/mwc-icon":"0.21.0-canary.4dc32be3.0","@material/mwc-line-ripple":"0.21.0-canary.4dc32be3.0","@material/mwc-list":"0.21.0-canary.4dc32be3.0","@material/mwc-menu":"0.21.0-canary.4dc32be3.0","@material/mwc-notched-outline":"0.21.0-canary.4dc32be3.0","@material/select":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-AK5pjeNlvh4SG56KUUrmLM6wpPuX3r58+PRN16VI77nFsQQI+7E/w9ZQ7ylcKi3iq2KTB4raKSvJoY2OmRRq7A==","shasum":"091b972d6df960422e3f2948382bef6462c51d98","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.4dc32be3.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQp1CRA9TVsSAnZWagAAZ/IP/3EFz8l6SH1A504GlMOo\n7LOkpsu5w65aAr1uz6rj2vkdho3z5UrmTXJJOdYt7h75iuPsseaQTw+sYrPF\nJJOcONCUza+0L4MZRy6fpLTgq+ALpNebs+X8puUzUcZgXnIgj3r6uJ4Ai8Fz\ngGfrznqQhdX5yOMXfPDgTfMnEggcci6kdDPTFBrbaG3EOfH+JMNvUezmPfq0\nFFXtAwMSA7piNFLRKtR+n2vqFZZGklrPyJfGLJGqvPOzyJMR9gQt4etjK2To\nRhs/lwPdiypm9rf+Ru4Qfo+5ns0nYSgMxo+pqTOF+qQ8qDxtPihUnmzxrQaY\n6wx2DPMmMKQWQJQzRsVZMfgd7ffvn5/EfjXCv00jSKmIf+FyDZoO+2mcxPlG\n5hCBuILnUeQ9zn1fRWzpS4twzjdmar+c3e15Xvxo9igW9JMzCgtppwhlG+x9\nC8SY+B9O3LMQZ9ohvFYp4+r97OlDM/VQdBKwGWqsgTj+A7tdJcdG7u5ZGRR8\nvzy42+4QC0LGu6SyTynbzG6lauA3jRbtNzCwvtyRn5YGLaArJqgFHDsRmNHC\nvoJETPvOw/7Yc33q2a7JyFDzbzqcrIm15Vm2Ru8sNzfDu6uv3Wd6R1R27FK2\nN5HIuNNwtj8wMHjx7FhN9h1q71roSqxjZqsDAD2OcqUKoONiHcJnUIxCOLOe\nzlrs\r\n=BUrr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaiLiI6co+viQf5U8cF2F5EiQvqRCnNgaKZVj9kTE5GAIhAORYYLoRCHccP0oC/skpvohWVL85TT2eJjhJCUE/n8TK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.4dc32be3.0_1617234549211_0.1076939656180731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-select","version":"0.21.0-canary.4b717f65.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/floating-label":"=11.0.0-canary.24609b822.0","@material/line-ripple":"=11.0.0-canary.24609b822.0","@material/list":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-floating-label":"0.21.0-canary.4b717f65.0","@material/mwc-icon":"0.21.0-canary.4b717f65.0","@material/mwc-line-ripple":"0.21.0-canary.4b717f65.0","@material/mwc-list":"0.21.0-canary.4b717f65.0","@material/mwc-menu":"0.21.0-canary.4b717f65.0","@material/mwc-notched-outline":"0.21.0-canary.4b717f65.0","@material/select":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+JJ7tHgcEaW3/47/Mh9x1DhY1GKws69VdGPg2OyOrw2TldQeixk6jSN4120fyI+qTntcC3U1Tgi5a1dSRf0ulA==","shasum":"304bcbfd875828d06d752117f1460a8a8d55e426","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.4b717f65.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg28CRA9TVsSAnZWagAAY+AQAIgj+bdLnYHLFL09n+xL\nQlgL1bbxK6ZiXm2uDq3qYIfqp5WBj0HsgPPo0Ir2Sci1z4P0EqUMaNNL442R\nIxR9PRsh1l78VSzq7lzp2VnO2B+yHKTDGGEsM58YpvbbjbRU7HdRxTBUudP5\n6FyVI5rihEaEqCClhLESsNZfjrPxaXvNW1Cg/NHMm2vlFRw0pxjUk7hj1ssL\nbeGlMMZfGAaHudEkwFzZuF8xAjVEik3gmMbaDRlPsfRWjHa/MT9HVEddpN0t\ngS62OH5KfQLASGF42Fmwjymptbg8GyRDwJicZbA0/2BIsleIVHIolnajEEQT\n0dJAALSbPvpFZThcSIaEsGkjB0zAsK79Q83uiVOlgpeb1VIzAs41N+pAt2Rv\nZ5HU2gAHLkvpTvNcUER3pSa1jWGCjHo31iy6jm0mwCtW2DBWxLELs3kEmPi7\nZ3bysELxLROzjcRKDotf0idmRdJz7kCnN8gT6tvNPEMmImD2dfOJ0XPPPZF7\nkJ+uAI+HJl50rUGbx4Z3fqL46ASxgV81k15QKF7Xxz6bHQHL7VpYNsjnZ60I\nbSZTgJoCVve/FICZW4XSDASQuBd39Ref+gxTYtElUMFYAo1z1c4azHZ4lXr1\n2NJqQqL+V2ST7+d/hE1TAXy8krzLWRRH+oYy71OWt6D7WcEwav9Jt0fknpEZ\n6ra5\r\n=v4hc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFZ2Z3YZ25h+YMrZxaqA7vu3vlCnyZiXUVNMHvHCWp7QIhAIGKO+nzDa/mQzoEuDBMqv3vhi32+vPpW/0qaPsK70bk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.4b717f65.0_1617300923955_0.8528727054018312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-select","version":"0.21.0-canary.c6870f20.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/floating-label":"=11.0.0-canary.24609b822.0","@material/line-ripple":"=11.0.0-canary.24609b822.0","@material/list":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-floating-label":"0.21.0-canary.c6870f20.0","@material/mwc-icon":"0.21.0-canary.c6870f20.0","@material/mwc-line-ripple":"0.21.0-canary.c6870f20.0","@material/mwc-list":"0.21.0-canary.c6870f20.0","@material/mwc-menu":"0.21.0-canary.c6870f20.0","@material/mwc-notched-outline":"0.21.0-canary.c6870f20.0","@material/select":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3OHvNsJHWhs31iboENgrUj8bo88gyHFP9ubjbYqYKJy0GyETWQYEMaQ3Awwb/Wr6aGIqjWQPTn6KjXWm0tWqkw==","shasum":"62aa6ad2083f3869d6eae0e4674ce595d235958d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.c6870f20.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlqDCRA9TVsSAnZWagAAN9UP/iFX1enU6cET+oUSxkN9\n9XKjRSze54wtpoqJ5qmdM/tTlUrmoupZW5gKOLpAXHP+7/o5BuC5bU3bYYAN\n7nPSC2gKDuEl6jZSSe8rZwjbfhfP+4qfkSC6MRhIJAWGeJH0B0PSFex5EaRv\n+MptgkkjkkRcNIXRESjkTm88Q5vHRSRgeMz6XJlbdSelvk1P3di8JPzmLfqe\nM4hawNEMnGsOACb3luTDC5MuOZm1QnQedubl7POf9buPPO3/pIlxjfBi/wvc\nYx3+63vDtl/87Wuq8VTgZwZGJqScIyeK5Xy49C+pQJMwL3wFVH5+9iG7TwWu\niLY1A5bh6k/dvG8AEg5ejBZLrqaGTb+wyPeuoSqw3cJQ6T3nxSVlcr1lbRwR\nbD/8pCloSScS5JWr71cZWZrkHcIcx9/qQPy8MuWbbntmP8loMmsGOqoFM9j2\nFjG3DP+hiqdUKfCop/vrvc8QXmKP6noHKISqkOEkfsJfWeMVTuZEY8Uw5N17\nIikZJ85OFGyakfV24E5jT+I63dpti9p6qyb+h2owS6NcjAJrCpt0HPCKN/CN\nNreATxZ+pnUB+rfaQkvr3E/4S08ceVSKmgYr+MEcTTVPyC123DlAvDy5jMz6\nSy1c4ZTC7/nJbhq88PIPY4Tp6eMzFZwxLG3/6JlML7jsAHMRLJalCghoglWO\n4JjB\r\n=CiaZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwh6n16PdNehX7it/6ZaQNRiMhVWVaFW54FD3927lAnQIgTIq3mKaPyd/pMQ3aGGMnMzWACwTKy6nCNPukcpfeS9o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.c6870f20.0_1617320578719_0.664321784391158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-select","version":"0.21.0-canary.852f873c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/floating-label":"=11.0.0-canary.24609b822.0","@material/line-ripple":"=11.0.0-canary.24609b822.0","@material/list":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-floating-label":"0.21.0-canary.852f873c.0","@material/mwc-icon":"0.21.0-canary.852f873c.0","@material/mwc-line-ripple":"0.21.0-canary.852f873c.0","@material/mwc-list":"0.21.0-canary.852f873c.0","@material/mwc-menu":"0.21.0-canary.852f873c.0","@material/mwc-notched-outline":"0.21.0-canary.852f873c.0","@material/select":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3VrqomvXIFtF8mDoC8x2tRB6QUZL/2dJLMABfNM0qrnzpjH8FLjfh5fYTK80GikPS3g17S6sAPOuVPOOyKlFtw==","shasum":"285d9b0f1f044183e99a3977b9bd7519175613b7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.852f873c.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqo1CRA9TVsSAnZWagAAad4QAIYuFsa5oW7Z4b/yzhGK\nO9fRLdk4iTNiRdxOMW0xuwxEG158wC4rqczvm6oGuq1d0jlVqunT38RVF6WB\ntReV4D9fIYi+1G+gTSjzlcplNlnz1kNcDNGOOufGxqQOjkC3a+2bcEjCDzcy\n0+Y9kBijJAf2grcmL28gqDUMD9cb2dXtS7/TDBWO0LCVfDLeQ/qs1sY+NG4Q\nr44Tmlw7cLVrDkikw2UaO8U7kw31HFrvsnBWVaNQ1tS1he1Sfo5Mc1pdSH9A\nVvZLiAfk4knPgncPfRkWdci3I1+Olr7tG0a7zW7FUuNPuM3dwNZaxrCwipiP\nVBAUONuXHmlWHghGByGLYGnO7Tevx/q3++659xSfdtzdF4Mu/M2xgAwD5uvR\n16ksAXYIXkafwMiiImVKzaydTEPqzxDlg31ORQ5+bzG4VuSsnopL8511HabY\n8wy8HFIp9OFZwZX0oPxJiDEixBNa4AVw77xskkhTQZ71sMrFW4zcs8pweg2g\ns1yIPl5cN7eKqqzy/oGDhOVu2j73jPb+8uHrWCD1ZF/a/PCJDNapCgYOyc6K\nFoJa6YKqNXMQ6jmvf0KPm+H2NJffsbU5tey/KT0v9t4w9ycq1QvYaYlPQONU\nXHS5S/LcH0DjKnO2fM3ZkLg3uxUOh3wC03HEWkCUl/PzY3mjFbQGSW114Bpd\nIjAp\r\n=+v5j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA51Q/nrfyC8gDqianNU6qMcKio2DK3ibHKv83mJNtI9AiEAjmGZDkVxVcKqE4XiGCVjPPjbQ6TYr9n7ioX71Oj5rcg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.852f873c.0_1617340981365_0.6905983127681534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-select","version":"0.21.0-canary.4a674a1d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/floating-label":"=11.0.0-canary.24609b822.0","@material/line-ripple":"=11.0.0-canary.24609b822.0","@material/list":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-floating-label":"0.21.0-canary.4a674a1d.0","@material/mwc-icon":"0.21.0-canary.4a674a1d.0","@material/mwc-line-ripple":"0.21.0-canary.4a674a1d.0","@material/mwc-list":"0.21.0-canary.4a674a1d.0","@material/mwc-menu":"0.21.0-canary.4a674a1d.0","@material/mwc-notched-outline":"0.21.0-canary.4a674a1d.0","@material/select":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Uswa1IkyADdAatjtrzlfUn5yHqnoaEwgIURENNJd05otzF1yv59ekPRBRkTolBK7cRgaOSaATCvnR8HYAufrmg==","shasum":"1890c388d505418eeb3f75030005471958a86e95","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.4a674a1d.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy33CRA9TVsSAnZWagAAdmUP/2/j5a8f9VRE22t8+1Co\nyofjSUgPI/ZCN7UmUgvMDVsI9/qz19T3Xuh6lWClrhO8jzjyuEX6esnlg3pb\nOp5uJyd5M+XYg+Li/CCr6bk4skwPW8TKHIjc/+wU0G9geisHAl5LsRGauEi4\n/+jLGo7a8NLzYAcWMpRX4wjuoDtsXiGgN0q8kZ0UfR5mC2GpAuR6DjiVOAoC\nL7T73VEkXd12vTNbS5FgPhPJXnu6U1HJ/36e1DBd+oQkeEfb0lgkstISircR\n2QIFEJ6JCcUa3noUxONY+Zab9SWHvUL+H150OYDws+KwjGjTeQ7XKRmeGzgQ\nui7ySxIZBZI+gpg1ty7+/lwyDSxtVo596yXasO2uPWeJ5kGrQlDrAV56I6kk\no7X6Eg5kIpYhXEpP+tk5SNBzCZPBHZEmXix625/hvNBG5K2SEuVF2kkOXDCo\nN5MuKNikvYmXLFp7b397hqarbMcE7MXOmqICGJeLGUV5VH4hp3HXFZPyvVCi\nTw2Nj4EtGfbP4BRLdtPH/R174clQosOeQPIL8CXcLdsL25H7qS0nOAnJoyJ6\nyij2T+OgnxUcqzXhppPzq/O/jNDfVkMkxA9C8royaZd9aIBSwDg05lLTiHcC\nHxUF2E+nsBZv2c1pD21p/E/g6IADZKh8BK/N8ZqrSlvcqnAHaa95jI9KDHgY\nfc5+\r\n=u9JE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwiEuFjpW4rJLVhQeOcg0BEm5Tp30MLTHQuOEfDPK2owIhAJ7p2d0ynsL6oe83PB1JuQyWsF6Td5WqOHeolBeOtzuK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.4a674a1d.0_1617374711504_0.06054062202390509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-select","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/floating-label":"=11.0.0-canary.24609b822.0","@material/line-ripple":"=11.0.0-canary.24609b822.0","@material/list":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-floating-label":"0.21.0-canary.c5b29ff1.0","@material/mwc-icon":"0.21.0-canary.c5b29ff1.0","@material/mwc-line-ripple":"0.21.0-canary.c5b29ff1.0","@material/mwc-list":"0.21.0-canary.c5b29ff1.0","@material/mwc-menu":"0.21.0-canary.c5b29ff1.0","@material/mwc-notched-outline":"0.21.0-canary.c5b29ff1.0","@material/select":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Qm8/o9cee6Oo66u3F5OaINhy2/zvZZPW8rsLFPsqlHlVKL2cizNde5OPlW/8cS7iRgYPlIENKG0SaGLv8SfJsA==","shasum":"394329938668f54a88ed5e3e224db5fdd96d18fb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.c5b29ff1.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga039CRA9TVsSAnZWagAA3s0P/0f8PfqO+JR4TuS320qO\nHDHknANvu2wnRIDClCIkHpXar3z6xw34aS7CavKNCgECPvj2F6s8FCBfN3M9\nIaSy/8HtO/SuEAEZ0e9mO4wZyKyc4KT59RG91JVeCtyhJS93/8Gn9llOYeAN\nvC4/itlAzviAP4e02zwxAu8tnTgkhPLa5JYG9xip/TPDx2AOnlMXDv8BHY0d\nznuiYgtHJt4dbxnBmsu96TM4FC87dMOjT2bKSE2Jx72BzP9qZgroJSx7Z2GT\nH1ViPSJuvoaO/Q/5E2N0wRJ8jtIX9jdkI+EUuyFHJc2Q9qY7bEQptPPI8S9p\nS0fQY7GdToU+5euLejDfkNmLuFl1nSi6QSd++Uy4R6HdZ7N11KcE7EFbd9uy\n20eWQaBNVht/mB+4sDsfcgK1DzT76HpfmKosvwRhagpTOInX2bp+K3zkY+zQ\njcPRE/FWML7P7aWyiIcYjTXNlDeZIrMwr3/N/KdKBLfyEmoRH9fOP9UoXNIW\nTegN3pP2SxrCg+icSn8xruzAH2avhqUlSmAEKAD2jWPYwvIbzOxtu8LyBsFp\nIMV0/DOgWLwwOHe7viHPOiPIqyr2blE31vS0FVeMEMGYW4CEC+QsfHPHhLQJ\nEwhOQrIofhuKOwHiSFTlwWbEe3OHnXlv3K0lpP3EHqx+XIQ9t2WS66JpnFp6\ne8gf\r\n=VVf2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRuHLeG+b1GoB8amytbMyYL2GU4inZI8KbbP+7p5JRXgIgLfAMoI1YrXAUCkjBAiZhvrWjqyeTMYP4oFUMTbbj4nY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.c5b29ff1.0_1617645052653_0.24551487831632102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-select","version":"0.21.0-canary.583644a6.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.94f50b260.0","@material/floating-label":"=11.0.0-canary.94f50b260.0","@material/line-ripple":"=11.0.0-canary.94f50b260.0","@material/list":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-floating-label":"0.21.0-canary.583644a6.0","@material/mwc-icon":"0.21.0-canary.583644a6.0","@material/mwc-line-ripple":"0.21.0-canary.583644a6.0","@material/mwc-list":"0.21.0-canary.583644a6.0","@material/mwc-menu":"0.21.0-canary.583644a6.0","@material/mwc-notched-outline":"0.21.0-canary.583644a6.0","@material/select":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vnLhVlbRrfMzHiFskuXdfi1AAllNOW1xW2qO2LtCj9GEco2BApzdqEqRuFu/0WmbzthBKnw9WLq4/XWDGPrDUQ==","shasum":"728de23133a606283d1fadd3c66a3bcc80d34fa7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.583644a6.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga046CRA9TVsSAnZWagAAsjcP/jROEP6BnF4tgB1p2qy6\nvS7wQLG/uC1rPvZe44QziB/ifIT3ENhpS9zQQL5SJqMUgVJha19EFuyZ3j98\ncpSkt0JjlyXwhwY30P43eYlmCIxLu89VXuOFCyFy2UTiCBNOjPzgx73fZYWb\nKzmW9/KZvNKAYS+yQS56kFjBe85zq6k6/k0i23xVhNv95DsTtL7ePUF64Vwy\nYUR8p1FqVXUnj8KVTLpnljSrwf1+qKGhRSlVkZ0d5lLUMq9oM7EcRycwF6ZC\nNZgMNAJdFEYobGAEQMPj4+i4bip1rWjpEyuMLYkMpTNxskCd17K6Ku7ggkQd\ngydaXdjS3cW8grVz5yLcVeGCfgxB/31vOIrQoyDa/ldB+wgFPHnXzO8DcL+C\nmMJmMHGbciUA8zO7l/a90uMrk+8tHAP8XW+ZrD3TImxLlDJzBqTVeOTNvUi9\nmtZ9bZRL42nA+fYb9ZvsPaQ9wvwXg5QxFapquYMinYPeO5Z0jocpvz0GVkuW\njqqq5D6l5U8MSdEJm1BMXvJB1HiFrIIIBCzM+uw3unL6vpDq1g4txWS2CgUE\nN3ZLhCgTa0bikDiDUtQniSe/bRuwteFLAlqHF6UqzTOdhtIuLruUIm/pZ06o\n8QIwPCu/2+f2yw+fRbw55mU0xQpeTeg4jkQ+08bDwiEuPX+Os/TRxodaLmI1\nWvyl\r\n=q1a9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEk3W25C8iYUSwgErsftKrjw2bb1JjgTFlhhT300aauAAiEA5KEFDDjXYuUmnW+6bGwBFzQ8N5NIgXk9z4aZDwTayak="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.583644a6.0_1617645113842_0.6594562845568435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.15604bd0d.0","@material/floating-label":"=11.0.0-canary.15604bd0d.0","@material/line-ripple":"=11.0.0-canary.15604bd0d.0","@material/list":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-floating-label":"0.21.0-canary.02ac1e6b.0","@material/mwc-icon":"0.21.0-canary.02ac1e6b.0","@material/mwc-line-ripple":"0.21.0-canary.02ac1e6b.0","@material/mwc-list":"0.21.0-canary.02ac1e6b.0","@material/mwc-menu":"0.21.0-canary.02ac1e6b.0","@material/mwc-notched-outline":"0.21.0-canary.02ac1e6b.0","@material/select":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lVxYiVbKlzLYNAFXBIt2VfXP5+iZlVHozzHrWS16k3AruftyEPsvMJ4eTTwml+qcytkuI7PvvtKX9Qm6t61Hag==","shasum":"0b215797c19bf4a1869eb7c96462db2455aa0f12","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.02ac1e6b.0.tgz","fileCount":13,"unpackedSize":208682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKpeCRA9TVsSAnZWagAAwuAQAIxNUnDr6PSgOLtKfLWN\npU5jccUWWfqKOZT0Pt4KZwIzQBb3ZnnHgAogO0OjfGOpQwb47QzhIh2HAIsf\nNfGD2tVeRtzBaVv37xH/EZSLx3/wFIbfChzV1lR3M+mwSLHasgu7NcsX07jJ\n4nN5O4uZBQ5uVaNBwl0DncCIbFkTbHbMIWfvuyckG+Mu270Rfu4uQgkgMHuz\nSkJ68RTsMMnaxriHz9t0tXKT99GYvT2TVtCcPg+P3wslhE89As7VUCWQCx1X\n2arJWsEiQES8lV0xjm9ymazfF4X38O8BTO0PzAO9JYeh9R+VneWrktVMVhwT\nGTJOJJ+EtYPYeX8SzRogOqZwZvEw23x34wyhldv4bJmj+DlHtaM4A69eyOyD\n5lO3BmGnB25wweZPiDnE5pqeoN4Jv/E2B/mO8P2v613wvn82EvVhwWMo9Zxt\n/kmPvbHoDZ2HblVDdeDUtCXqF470kF2raqJSMu0gpJDu/MBdXtQQsEHRKUGU\nP+VwMdMN9iYOu7TUaC1vZnzBvh9CtM9sW7MQTY7Ccu9C+fGyc2GOhiDYRgCz\njUbyIG63p7k8Mkns/sir745jQkPGJH0heDRI4D0YlQp0q/AQhL5jcLefNdeU\n3RA+lKIm8GLwUc+K2C7fe+UBXgNlv7zphUNMIEcu1fV3W2liAFQqTnCzCnPh\nm4rv\r\n=Ccv+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhuCs0EUEd92/+t3GlTmGMajNI/o1fnc/AvB0iEnwZVwIgP4pwTLEVMGQVFFdyjnCMb2Mm2YLK4c7LqFZpY/HBle0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.02ac1e6b.0_1617734238383_0.21673302084479618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-select","version":"0.21.0-canary.5ac5856e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.15604bd0d.0","@material/floating-label":"=11.0.0-canary.15604bd0d.0","@material/line-ripple":"=11.0.0-canary.15604bd0d.0","@material/list":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-floating-label":"0.21.0-canary.5ac5856e.0","@material/mwc-icon":"0.21.0-canary.5ac5856e.0","@material/mwc-line-ripple":"0.21.0-canary.5ac5856e.0","@material/mwc-list":"0.21.0-canary.5ac5856e.0","@material/mwc-menu":"0.21.0-canary.5ac5856e.0","@material/mwc-notched-outline":"0.21.0-canary.5ac5856e.0","@material/select":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-W0IiWlQJgx/KcevTdLoG6w0b9xO2wqe/uUZaSsDxm/QPwJ1mNKZd+H6K5H0ZUCbvZhOHOwHnhXyE3L9wL+u/Ag==","shasum":"a124d6232b85d7cdd91d7e105e506e087c24dee5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.5ac5856e.0.tgz","fileCount":13,"unpackedSize":208456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKvYCRA9TVsSAnZWagAA5PcP/0vKzixCez/vUV922K77\nAODzrmL7EHTTr7d60VVA42GYn4AsE32Wobre8HKwfzshziadF1B1IUvwF2Zz\nlSLFrXxf1wl5wSmVi1iH5lxU2lcyT+3nptWOXZa7M2NO0IaQr6GkatpXs5op\n4OkiziemRKMDr7ru4xfqSf7FTGnYGEqvbrVHU/2FsE6zeVnU7a6FULLi4Xj6\nNL0u15kLRXwnlwKF4FABzECvVhQESFL8kXRpl2/qdEULGUXjb9oz07bE1O/U\nXty1hQ5ZgIF04odJHDVWhd+JSRMjTelUrNqm4ONQr3JIGYr6CXjr5mVeFECC\n3EdKV53wwYsk06Wla8nulyFLGs15hR2vKmapRfnfX67PuCIk1PEKxLjBl+u9\nU721L6i2wmQn8BK0fKJfMf5ePFlBHByp3Cv5rFvDhqkOMEgnK7R5v98cgrOQ\n8ZEL1W6aYLtSXe1YOZ/N37ZtTNpG+QEXr2yq41wipLz+c9dJpcwU7C6euDLy\nWLXxaVTHy2tE6KNgxJOCI6ojrEBFCISNehcIZt3rkgaUvcDbaSiuUHDS5zVy\nlVj4gEUNeeKLqQYA8PeB1vL6VVf322s2zLY0H0hVzRCWgy8ivJ7U4xlDcPLT\nM907wgZxUZWnkOP7OLedjGu7EzX1k2OIvCUmYgCiJuGYE/WwwQksm4GC1j6z\n6zac\r\n=zUBp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKeC3OnHMoW46i5NRFZ8OYolrFTO1MsI6njsVGZouxeAiEAmEhxfplweTLGKpISxQ0JDkBIpUOh4qIwzzGUlmMt7bg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.5ac5856e.0_1617734616040_0.6913100958342162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-select","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.15604bd0d.0","@material/floating-label":"=11.0.0-canary.15604bd0d.0","@material/line-ripple":"=11.0.0-canary.15604bd0d.0","@material/list":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-floating-label":"0.21.0-canary.bb23dbc4.0","@material/mwc-icon":"0.21.0-canary.bb23dbc4.0","@material/mwc-line-ripple":"0.21.0-canary.bb23dbc4.0","@material/mwc-list":"0.21.0-canary.bb23dbc4.0","@material/mwc-menu":"0.21.0-canary.bb23dbc4.0","@material/mwc-notched-outline":"0.21.0-canary.bb23dbc4.0","@material/select":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5Gbbw7+tKjq0OESZyLR0g2OF1Mqhspw0v6FHTEMt4dxkJZPGnY6T3X6eNkLmfpaUVGwSEe6NusF7Pt7x+roFaQ==","shasum":"7491434385f9d833690b61752df97117382d27bd","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.bb23dbc4.0.tgz","fileCount":13,"unpackedSize":208456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiMZCRA9TVsSAnZWagAAaIwP+QE61D8al67oCVb8xbx2\ndYkjlacqeLuWPZKrtNb7adtiMLyDTM/rQcNgBUFOU6LMydBid/XZbEhvC5AJ\n0dFiygOutt3QCF1ZLTTDR6arBtMHdomdPZGa1OHIWlQMdaA234F6V9cRnM1N\nHNF/ndZgqh+J4aMhyJPxPzIGrMxM0yyZOv1rMj9iKA/ZchSFw/6we8VEA6X2\ngjviGaWYL6slWtXG6qOpXF7diIKM4cnyqjZ6tMMvd6PENzmFUXnPpuPkkBu4\nn1r0ua8xECZRQE9+ex7nzkDf2xzVRusDz/5jnjeOgZwZAwQ9qGvtNZuK3RcV\nGtVH7Totn/IJvzaobe2DkntnE1jNIW9RkBcl0b+rZlUXrdjt1Zz6ZoDiHqrr\nMOeH1ptgjh+Dgvfmq+Pm4QdKmgvKsgRDiuavQ1Qtm739NR8PEoD0jh3rvf0N\nPI4IN/tI63w0J/ATjIXki26lB+QCq4kXyr5GtqCZR/eNCcttpfVkWfgydF3k\n98UTE/KhNKOFd5NidtZwSDqO5x2kflSR/hu5SwM7s2EU2kVdgzNWfZZgLyiu\ng2wsuXuEhQJM7gW4t6RHawQh4nC3VFGJK8aZnVOjYMRj8Ji0E68Vb33J5pZn\nRx1uMqXzsrGMGoZWbfCHQisffgrJugvbTbMZD6+yEgbV/Dgk/lTdQWgFeBsD\nVgf9\r\n=c/Ul\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAW44q6Kz3DPX9PZKExwAdXIEPVjjeQaY6xmMZy+aRkdAiEA/OLqh1R24yjrqlrN8UppuBSJQCfrSvCMwOqOf4RG7Js="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.bb23dbc4.0_1617830680560_0.5813420126484883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-select","version":"0.21.0-canary.e539904c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c91e8d141.0","@material/floating-label":"=11.0.0-canary.c91e8d141.0","@material/line-ripple":"=11.0.0-canary.c91e8d141.0","@material/list":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-floating-label":"0.21.0-canary.e539904c.0","@material/mwc-icon":"0.21.0-canary.e539904c.0","@material/mwc-line-ripple":"0.21.0-canary.e539904c.0","@material/mwc-list":"0.21.0-canary.e539904c.0","@material/mwc-menu":"0.21.0-canary.e539904c.0","@material/mwc-notched-outline":"0.21.0-canary.e539904c.0","@material/select":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4FyWJ9AZVFtNvbi5e3qPdwUth05dHfPLpvZ893D+zo3QfZR0Af8ePiCflxsQv4Dzsa1HQJwLHXZ77c0geFXj+Q==","shasum":"7c9f339f2bbdc092e885e72c2f5578e9f29864ac","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.e539904c.0.tgz","fileCount":13,"unpackedSize":208456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0VJCRA9TVsSAnZWagAAiTsQAJzaIpEtcos4KKrw7ziT\nbjDfGXSefRNcmYI8cGsjGgET9hGtmBUPnfCfFmTCgeZD/LUVN2DB4R0Nu4R3\n/T07edWywhzmDl7LzZaVPx/gK1wqLhW6PNAUa5XzXigqp/yrWnzLf+dHioCe\neCfPmWKBKsmRcfQ97JcCpyNq4tUWGxAwwKKT+f3EJY6yn2QwwLZEoDN91MrH\n3/DMr/wbA4D0MMmJEMr5yBcY4USQGkZLlHW+M48p1+46twwtdT+o3j3LuUKm\n0GyOzRmDNHFc68BJnMRhLU+BeHGw5DypNzauZ2tAMRtw4ad8blWgaboXGXmy\nFCg5RkSmP3k9M396abufWNBBXs2/NB1a1jqwMiV/ZeNYBafs+VB6Z4htWfZ/\ngShKdGXOFRLTgXVJohIRVHBXCUS+sa8nLQ4kR04YC2JKLR6IC2cR4KznSQuK\nbWPW22Pd8WFz2+2n5lllaDWaas4CqJdXdvhu3naJR4OI/aVX4WCpcAUBgSIC\nlvz3PRcdjl/Rp9rl9UL+DXJZp15WZEhM0YqJ1c8aIZ1dP4BiDami6SlyJ9Tj\nna5YoRPHsv8P3lHkmBu3ZSORddfwpZdiaDnH0Id4SNL82E7Zrxe8aGYxrwCX\nL4MCgKN6gHRxpWKyopxl3145O4r7pBO0kXWL0AGf4CnFDBTh8bUu1Z8EcYG4\nHHke\r\n=gH/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfLASKKjsqPTJJQHZglDpxqMOhLzpN00jroEn8MneakAIhAOS+syPBBTT3Nib+XUZo4gWJx6pmpes8Qsxdx7BCfBEq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.e539904c.0_1617904969451_0.29277454776989176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-select","version":"0.21.0-canary.a93ae333.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/floating-label":"=11.0.0-canary.b2fa996a1.0","@material/line-ripple":"=11.0.0-canary.b2fa996a1.0","@material/list":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-floating-label":"0.21.0-canary.a93ae333.0","@material/mwc-icon":"0.21.0-canary.a93ae333.0","@material/mwc-line-ripple":"0.21.0-canary.a93ae333.0","@material/mwc-list":"0.21.0-canary.a93ae333.0","@material/mwc-menu":"0.21.0-canary.a93ae333.0","@material/mwc-notched-outline":"0.21.0-canary.a93ae333.0","@material/select":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DU+n682XVpl5Kpl+r31qd/Yjy18g1TLX4nrDP7q3BZn0q0uJ/OcToiom0O7IaIABgykA47K1GmN/PadXfu/jjw==","shasum":"247e95e38b48522d2ab48c581452ef48194ad147","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.a93ae333.0.tgz","fileCount":13,"unpackedSize":208456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUwCRA9TVsSAnZWagAAhEgQAJKzwJ0NV4TtHv+IwDHh\nIrgys3eX7Ic9Ito+XZd1bICOLrLN8tE9Rr3Wzn3N1GaG+PSboCdv+r+XWp26\nSoAqgnCxF6O/F8CvdTUobaLwwCdaSsA787owjdRH+Mnfe6UqbRe9ncjuIIfL\nSGDCj19AmntsTUxLFIhrc+rbRsKVVw+XzjF95sAk4wtA1afJB1QReiSkZwHs\nmYoPk53oN1dI/ohFGxhlb58LYyypSH3IG/t6uMYrdPTmm5WI+Aa3UM0EUqi9\nu66yl9lfJibS5gWCmCpod2uJJj1gGEUZ7QB0rNg/dPxmC2EHF5svC2/YfKft\n2H8zjCsHlLCFSKmKNriDKyArsggCEqARM7z0KruYE5rlLKDNx4/Ir717AwL5\nU2X2fJMCyTIjZGankrzGsreGcxwvS5Mot4Cr/RIBRs6Eq76QV+4K29ag4Tuq\n8BYEFXSgB/iGaDs4TRvkpBuyovBc0R/SJRMigZc7oR671WDi8GMFlr6JJSoE\nU7o+JRPutEOgHop3Q+UVOLNk+OhZWMRhJdU6VYILL3xo1yzDko3Ww9WkU9Oc\nkF3IZ0OYe7mPaqP4pA5jYHsN2qltJqx5AqFLa3evlR2L4pqGMID/Tpw8VjLu\norr0y2zxLJ0QATsO3lP/jl/mEn5zDAzoMfMJ7stQ9CknaqTdDbIVVox8vNEp\nPXrJ\r\n=TjcK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICHVppMMOGQq/8ZgGZbXw8/HP+YQN4s9paz9KfqGVkSMAiBZT/R2MfCYfwX7mE/36OQVHk9B/9jxZb/CWxky4/yifw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.a93ae333.0_1617999149044_0.5537577061153027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-select","version":"0.21.0-canary.e142c144.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/floating-label":"=11.0.0-canary.b2fa996a1.0","@material/line-ripple":"=11.0.0-canary.b2fa996a1.0","@material/list":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-floating-label":"0.21.0-canary.e142c144.0","@material/mwc-icon":"0.21.0-canary.e142c144.0","@material/mwc-line-ripple":"0.21.0-canary.e142c144.0","@material/mwc-list":"0.21.0-canary.e142c144.0","@material/mwc-menu":"0.21.0-canary.e142c144.0","@material/mwc-notched-outline":"0.21.0-canary.e142c144.0","@material/select":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard action. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Sw1LHKSkkGTfeLY7YlpszQtcqw6y6yBAZsNx4rl9XubT+KCyc9LxGE/YNDEGY9/f0/IuMvL8VzfZ2B5D4NRcaw==","shasum":"89d59beaa4138c807ca2a47475cbaf042521b0bd","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.e142c144.0.tgz","fileCount":13,"unpackedSize":208456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5uCRA9TVsSAnZWagAA/QkP/3N2XcPVdOOd8vBNr0fv\n1By+nM9OIUcN400lWcrsxTNHS3Cf/UAqXG9eu29ITAIZLBbNaWOU92s+3C/w\nY3x6PqTPIC1FmKmMKDb0j7W8AEojtXQrshgSzU1Kn+srEzB5d9OZO8KhpMXq\nEU5TLj8MVeNCTwwTp4d+yjgtr7wcJhMvqjxPzWNSzAJ10z77o2+vRkjxWlxt\ndKBRxMgFwBSzRvfnZlyvdRKEW0gbK40JEmBgom86H3L+wH1zKxjRwTGVnrh6\nTUMqDXD49yiUWgbywKrWlYr6/4rjmm+r9H3MrWa6xm0TX3ViAFV+r+nz4pgn\n7A/uuQBHt3fRAKnVOsHTefc9b5q0O1J8Zs3Vvl9p//FhhSI+MXvps3c/pC0+\npgommnR/v8Zwvy2w6Jbjq+nrhldtfPGSxTjr5x3JXhJK09guHU3lBb1NS0QB\nD58SgPbQdoNaIC0gFw5HQPUzD3rpwmg7loa1HUatCmz4LszUJnu73Qu1Y5OD\nK9tO1ijuoPsTi+7V/8Umj4ABeQaEA0u7OLRMkCbVTG2B9y8uASZYVfUeFHAE\nYE7KMAmcg5U4w/+OB+lZPytJ3CWh78o4QPQGZgtARGd+3HnFqXx2+5idwMJT\ndr2WibFtN7sPpbjwzLm74DD2rAfP129H9N156LOIxux7EUyobSPjT7XoooCR\n5wRy\r\n=HZUA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClh8NGR0vB7O7/jwAbvp7QAf57E583VYicBg/Q0VxhGQIgKdPBVefawyneUUSAJ738nQZ4bV35oux/sEoC47P7NZw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.e142c144.0_1618239085781_0.42490370073765527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-select","version":"0.21.0-canary.382d7eb0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/floating-label":"=11.0.0-canary.b2fa996a1.0","@material/line-ripple":"=11.0.0-canary.b2fa996a1.0","@material/list":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-floating-label":"0.21.0-canary.382d7eb0.0","@material/mwc-icon":"0.21.0-canary.382d7eb0.0","@material/mwc-line-ripple":"0.21.0-canary.382d7eb0.0","@material/mwc-list":"0.21.0-canary.382d7eb0.0","@material/mwc-menu":"0.21.0-canary.382d7eb0.0","@material/mwc-notched-outline":"0.21.0-canary.382d7eb0.0","@material/select":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2Kdp/toqRqFkOmsKASBuVRgkCTmyve+tPbpPld0ejg/NYyap2gX7qg6A5cjt+YbdSc7L0Tb0Gzr8SZ55ilMvYw==","shasum":"354e9abcd8efa3c538e0efea3aba50cd50744a90","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.382d7eb0.0.tgz","fileCount":13,"unpackedSize":208329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMRVCRA9TVsSAnZWagAAk40P/j8ZHkhxqdAfVD9xTehs\nMw07mW3WHO0pq8swP7LiGc07al789FLIqzzai1tt/9Y7WCCo83abgQqTnDLJ\nVS7akJryaxSLdYUwu4nng/NdEyOMI9/uh7hp6uhA9RMSYvFZPt3qF4BtlMZc\nKxUF3uy7dEkK8RKtiHjVtMtefxgQFjYOMBViziykcts/mYastBm/jv26/Fb4\nVo/MQ8Gv43kwAp8HJ8W2AUM97lXC6YNWMVE+CkYwmabq8rTbpBk8am2/xNU0\no6zMiaIPqK1Y+4IT2/n4XIpm/Wbhuogu7mbSONGV8Uifw6GOAUcfk+thtYVM\nlb4LtRyCmWXdZkX5L4024aeApxki5Oj8Xwy3xWQ1q7j88VG2hVDga8FPCYnQ\nOFujuAsJenKmP1pFtE2Ldlay5OkbWE3vWp9fvMxImFWEAlBh8ymgegurVO3k\nves9LCp0EMcnwdWE9GuGyqWVo6hmaNesS1nQvjcuI9SF+VZSWeoyYtnt8Dqi\nBQz3sH0RiOcG6/scD410Ov7TCAEy3Vx7t1ulF3sdBniMGQjMKINliTshSjeb\nRvflKuaNREDVKwDolJ7sEuftH4Id0z4yYwmnpZMcjeXpjtoQCMU0iC8IonOi\nbKcryVIwWhJd2g0TRCZ0AV3HLYVyyqtHAaOJRhmzPQk2xv1SHTG6D0kF9P+A\nYeFj\r\n=Gj+t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcywdBnoYH9Qsb/RyHRk6ekqKRh8iFmbpRyp33GuHmkAIhAPcURB0CXMyKwTTG90WEMyBShXN25HsgKL9/vUzv0rhn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.382d7eb0.0_1618265172678_0.42420023523929307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-select","version":"0.21.0-canary.b16c7885.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.352b295c1.0","@material/floating-label":"=11.0.0-canary.352b295c1.0","@material/line-ripple":"=11.0.0-canary.352b295c1.0","@material/list":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-floating-label":"0.21.0-canary.b16c7885.0","@material/mwc-icon":"0.21.0-canary.b16c7885.0","@material/mwc-line-ripple":"0.21.0-canary.b16c7885.0","@material/mwc-list":"0.21.0-canary.b16c7885.0","@material/mwc-menu":"0.21.0-canary.b16c7885.0","@material/mwc-notched-outline":"0.21.0-canary.b16c7885.0","@material/select":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-87KMSMnUaD37FvyU8ai7NCG/XO0ohZHaOTRBoEIBFR0YTLvwtMolSlr3tgASMldyAi7zLWOvfPV7v0pP509p+w==","shasum":"7319ad762f174aace2f6ff5d247a7f58fb85406f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.b16c7885.0.tgz","fileCount":13,"unpackedSize":208329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMxECRA9TVsSAnZWagAA15QP/RTnZuirUU/79cPVdfEv\nml0sR9tPXKlrjKSs7Eg+6xRMzPegN/fVXJ7BApRACKphcoHfixKyODOZxRnP\nmY4psgZa6pEUjIlTWWLyfIUF+QO9ogG4y4RsHb7v/w/WKj2ti7ACaDeDrQqS\nkxsw4D385vqa8n8TepNepJZhIy7X3US5hbeAdWuaJ38tKC2Q+w88VjjAcXUk\n08G8VavsCMAeXr5r36uolIIYGeYRzerpkaVAalbeKYAi2y6a4nTY7xlEZzne\nZqWxEuJrzN3W2gO9UJlZX5Pz08NKG1LOJkkN96QnhSgAr/S/sNS6IUxTpOVP\njL82MN7QXMxwKxiU3SAylIQ7DA02lml7bq3hrZQTGhacDNDcJ/1QDRxkNUzE\n5pSGGhzhVQ9fAJNhyBmfLxKOJWis8FKR5tYxdKgMvVaCSHOI8hmE7+CUZnvG\nxoW2gmQ7jiH+IEkMNr1mNkHaeqOtH3ZLRKa6aUIdAK+CprgkZqakia70qtLr\nx03kfnijVR6NsACa8AliTqlW0/vBRnuz+CFz3hdSNCEkYpsqaYfAChzhzR2o\nxkaaXksIbn8uegEIHi5mVZE/tmFQiEosYWPdnT53DhrjzJ8WOS0JW34jZYu0\nw0qKNLc/BFvwkzEytULRt1FVt61qIR7cJEY3CRYa+t99UBK4zbqESKVGQZLr\nqESk\r\n=w/Nq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4HTKk1MuXoI6j31hjk7odUBRs9EL2HYtb8OCmiEKzbAIhANdxLMWVxaWpphvW8wBq59+us9nxv5Rc2r86kVi16zNV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.b16c7885.0_1618267204126_0.8963035882167658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-select","version":"0.21.0-canary.0e92782b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.352b295c1.0","@material/floating-label":"=11.0.0-canary.352b295c1.0","@material/line-ripple":"=11.0.0-canary.352b295c1.0","@material/list":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-floating-label":"0.21.0-canary.0e92782b.0","@material/mwc-icon":"0.21.0-canary.0e92782b.0","@material/mwc-line-ripple":"0.21.0-canary.0e92782b.0","@material/mwc-list":"0.21.0-canary.0e92782b.0","@material/mwc-menu":"0.21.0-canary.0e92782b.0","@material/mwc-notched-outline":"0.21.0-canary.0e92782b.0","@material/select":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ABxQ929YCzElkqh1D7wsE9wxeE3dr9AUEaiJ7dKbEfyNOlDOYEakXl5YarCqWqrFG9v5O/l3Fa+rSw8itYgOCw==","shasum":"79ac5b8bfafc70ad37e2a6639e68c5e413057392","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.0e92782b.0.tgz","fileCount":13,"unpackedSize":208329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3iCRA9TVsSAnZWagAA5DMP/3yVRQCrDuGlSX4jELi6\nmWFE6Cx6hcxNjQ9xnT5GEkvi3tvTUEBbSuXjGQcPxKkjbvKRgkyRxQV64IAL\nOsx0+tIlqq/vcIcPD8wzLCMd8OSZLYHst0q2yKSKo5INemVGwiUlFjsONQYG\nKZlhEsoye0v/gx89+ugiwdj0/c2wHhxQXr0wYDVCAYbI5t7rILT9KLE80rxb\nZXw1IqVYqRyi60xt0/3ssh9AH9G8Z68AsZAIwULygJ6/FtcYJ64UfEYLvVde\np3QdZtxTY9Bm6zhY+X+HZH60JTAW4La8p665G0gQZ5mrJgAsGcK3aMWwAsdv\nznnRPaBAYqREMPCayn+PIbe6s2QnkKj+tWDo8iXBNlGjEq3NwKa1dXh7x8QY\ntk8PBCe5x25FUS/rIHtf+BSn/QULfjpvlro2xP1CK9hI8moMKW5YR++y/J9X\nRh6seLJ2dRX6+suxyDmhgEVbOfm7QmvHAZ9b9osMcRD1cSAX0tTYyA9DBx4s\no24AeSGpgeimrgWrtpIkHwiEXUgbrkh0oX14ryn+M7hSDDYG9cpEXMgJ1g/u\nE17zylu/5b0Zf2+uZsekksndwHtu9yhXNzC+LyPd9u8MuSCgKez7/cBZDum6\nGGNu/5vvG38hSBPVQ5xbTZB0lBNCRvbcXRTl3zOUQEdXE7WlchtSadlCnIsq\nW/hV\r\n=Nfyw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAEoEQ1gq36ws/FL4zQyZJJxndZ9V8+ncWMqjZuCA6TLAiB/1qIW618wwqmVyW7sqlem0ulbX8o8H13g34PwU+tcXA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.0e92782b.0_1618324962101_0.9039660276210553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-select","version":"0.21.0-canary.70b3a072.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.352b295c1.0","@material/floating-label":"=11.0.0-canary.352b295c1.0","@material/line-ripple":"=11.0.0-canary.352b295c1.0","@material/list":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-floating-label":"0.21.0-canary.70b3a072.0","@material/mwc-icon":"0.21.0-canary.70b3a072.0","@material/mwc-line-ripple":"0.21.0-canary.70b3a072.0","@material/mwc-list":"0.21.0-canary.70b3a072.0","@material/mwc-menu":"0.21.0-canary.70b3a072.0","@material/mwc-notched-outline":"0.21.0-canary.70b3a072.0","@material/select":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-IaX15jWf94yXEA62z+Jma27LxWvQw5zjf+w2ZMJ2g94DCU8aZ1p978eyp5i/6Fop5t1rAOaR9ZLYfUXAs5WX7A==","shasum":"998b25a667d1a05704003213768430258b144a73","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.70b3a072.0.tgz","fileCount":13,"unpackedSize":208329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2w3CRA9TVsSAnZWagAAn7cP/R+kfjGD+i2zR4qAOK4r\nRmkFq0/diIn9fYST3WWUaVEwHNOzOzYCukrlAfHUFCXZ8X0tvxCjAyCeN+Rd\n+tlUFeAgbWHvNgeR0YhkSDr57m1YVRRT6OfO+eL5v8KXNMKkC9lRMIulNNy7\nhpJbVESExWmMz4wc5uLlL2UIJSTi4cfvZXVKYQfOiwSVQqo/M7hTSnIAfHNX\n2QIrnYX7wgXbbKW+iMbT8q/WgUmy+kld5brn6NCEXNMU6Kl8RcVEL4z/2B2l\nBDzuwD7dUgqnI+3uXG227QgoiFNggomNct3/EkfNcLbmY6XKDUjBSlk1BKen\nisKiJgkhzL/vkF5aVyKshG2Uqq/Dig1e51epNftE8DXseNN6VCAJAqh1djn2\n9Tdzm07NI85KOhNJRytix0rOfmPm601uedRdVeZrKXo1mbGTuPITNpntkJmu\nimS0nD+9mKCBJ9+6/eQ2KR9UgGfzgGkvc+NIfcqrdaxtKwQJN0kFa/hsqOX7\ny5Hpqm4mScyiMgwlo19GU7HYMpz7ViaLOQjR+WOwBuGmb04+4dON/bned2TF\n2OOOvonKzCFeL9B+fMw73h8ZyJOvLG/UnDw3NFfHaySzpGdmdxhgb+CX/qhv\nNfH8vmNciz9/sL4GnEGnYW499BBFy3q2LiJWfOkNcPa/84h2NjvkS3vEr8t4\nCYwm\r\n=MZNI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQ1IaLqTPcOgMB9IlHN3R/nxjcnrsUxF/BylfIvL47zgIgNp9cVKCjOugBbX/k3w4+XoTNucYrDiWoq7ATih627o8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.70b3a072.0_1618439223400_0.06554227645308641"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-select","version":"0.21.0-canary.ff79b092.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.3793a3143.0","@material/floating-label":"=11.0.0-canary.3793a3143.0","@material/line-ripple":"=11.0.0-canary.3793a3143.0","@material/list":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-floating-label":"0.21.0-canary.ff79b092.0","@material/mwc-icon":"0.21.0-canary.ff79b092.0","@material/mwc-line-ripple":"0.21.0-canary.ff79b092.0","@material/mwc-list":"0.21.0-canary.ff79b092.0","@material/mwc-menu":"0.21.0-canary.ff79b092.0","@material/mwc-notched-outline":"0.21.0-canary.ff79b092.0","@material/select":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aGlUWiWk6PSAPfEFAGmvB1zpGaYRloMfbDA5mmEeZJVX2mzr+4/y6tg2RxsDn9v0p01ATdjdDxB0LgwPp68gHg==","shasum":"f64f6cbafee32b920e8e6b2e8851c68dae004748","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.ff79b092.0.tgz","fileCount":13,"unpackedSize":208329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI1jCRA9TVsSAnZWagAAp04P/3QUDcdCDhKQEGfDMy70\n/fKLWPRCEJt9Nd08JPGjk8gNuXKu6HJ9kVL0sxzWbVZZcmWVkivHVYHeOocy\nZ9Hre5fcSq7Up05IrbAI++6FCPGJNayiWFrcE1O4E0yyRHklzFeJS24ky2uV\nJTcW6hwamvLhU/Oh8oz4XAmWr8eUIphAxkeCM+p6cvuR6+UroocIf+V5clTu\newpWU6T4P85e7HUV8liWknXjh57aNj+iI8DafB9krTqF3WUpT/i1diC+ZPLX\njZnoflFcdxDNT7Q4l3ThMg3nhyWXDzsqEjV3O5vRkgSba6xx9i6eYNkuN1Xs\naEZgN4jHO2HYaCWnz5bycd/xuvy8u4B6ACxQuMISCGKzcr4WRDOMHvsXNTE7\nNKy+wv9MrO49EQbMirNme8yluFZOlL/uN+YrOYO8YS5ceGcEfI9Qt/8BX0vS\nMabeylOeqIYSZT4mjkUR+cy77s0sjgue18Dqv+UiCcYWsR1xYxLueYTW6iV5\n/EyBbwMWyLvEwphW0NjvF+Sxa5ZsduyFFD/aO2JsZP8y9qG/c4LxGyi44jb6\no4zl5Ce+ypUyg4lVS+hXzUIwPPXt03XhrqZYbfbckpYnxGjpMja1gOKmmV0W\nMCR+lY6YPyZzB2NLuxku95JnqK1e9JoZ8Gop+74n0/hV+tEFH79SZNnUGgwR\nCAwo\r\n=EXuX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQK03r5LqC5xBbzUBoX26Yl/B7pcALzy2mGm1BKb0MtAiA38RizEYPNI22vGpbUZkiRkUkfaC1/cnmc1+B3v22nig=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.ff79b092.0_1618513250836_0.880126874378012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-select","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.3793a3143.0","@material/floating-label":"=11.0.0-canary.3793a3143.0","@material/line-ripple":"=11.0.0-canary.3793a3143.0","@material/list":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-floating-label":"0.21.0-canary.f35b2fd7.0","@material/mwc-icon":"0.21.0-canary.f35b2fd7.0","@material/mwc-line-ripple":"0.21.0-canary.f35b2fd7.0","@material/mwc-list":"0.21.0-canary.f35b2fd7.0","@material/mwc-menu":"0.21.0-canary.f35b2fd7.0","@material/mwc-notched-outline":"0.21.0-canary.f35b2fd7.0","@material/select":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XQxlTK0BEubQrOoiPXTa5pSZFVtO01wpqBuKHHXGOvMdCHlzQLisaEwnebmALVqBe/0Sn/GPyqhGGBTuSgBJGQ==","shasum":"206fdc871b6fd6ae2678508b40140fbf1176be69","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.f35b2fd7.0.tgz","fileCount":13,"unpackedSize":208329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI/QCRA9TVsSAnZWagAAs+MP/1RPmTBK1x2widsov8d9\nOKXmNCU7raO972j+9ekOSJHvJNi57BrTwBuFcld6NLnhHGrdQFnZZCW+6XCV\n38bBIawRIL5Mkx5JNoFlgsiEZt99frLnc1XeQe0IfeRiB3Zw5DrLOUm2viMB\niL9ebclJV0tJ0921uzsmp6JzW7MjJl9oBruTCj23jT6P43Hp0DOGezDPUhRo\ni7QHqfIT8Xqzt0XB9FLvbXsbqwAVtII1e2RyEHux7QrkVCxVlgZ2KuvogGco\ndJmiSfz2B2P5raTqWGEloX0Cm7yVi+GafgmF522+xnq/95i+Zlf44K9M+tcB\n1w7jskFPjzI37sHt9+wUZbW55d7OWuf1CueZkaD2WAQ07ZsXo7n2gqw4rgaK\nnAt4rIDfaKVvvEaoAyKkZoZARExT2S/wiRG8BxEVLvEoL3D9uBOkRZoC3Pas\nDcHr2lLQU75SWwDcq2pgw6JVkvDFTzBy1IwtWmurGEUuCg/r+i182TYqmOcR\n7pgfqYvtt8wTGSgfLbZksiK78U59M5zbsGMYIyqCoBafZnxaEIqeGpuRPe7X\nziNbleLCp5sOuzTmYB53sMbFYu4Hj5xWZ0zLQxpHCt7xQKeNDyFCitIeHUJS\npOZ5tbmp54+xqiQgj92kd3pAddVoq2ccoqAxNWGSgzIgSzuMb22P9OWd6TIu\nyfB9\r\n=GonM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIKXENDhwii9RUdV40QKVIHesnQ3h+8dq5a9joVmP6LQIgaShbJUX6iV/nM6pJZK1n1snlW9iNNnQAdGDBnTUH+7U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.f35b2fd7.0_1618513871603_0.7947226787540014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-select","version":"0.21.0-canary.11977cac.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f342c3f4.0","@material/floating-label":"=12.0.0-canary.3f342c3f4.0","@material/line-ripple":"=12.0.0-canary.3f342c3f4.0","@material/list":"=12.0.0-canary.3f342c3f4.0","@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-floating-label":"0.21.0-canary.11977cac.0","@material/mwc-icon":"0.21.0-canary.11977cac.0","@material/mwc-line-ripple":"0.21.0-canary.11977cac.0","@material/mwc-list":"0.21.0-canary.11977cac.0","@material/mwc-menu":"0.21.0-canary.11977cac.0","@material/mwc-notched-outline":"0.21.0-canary.11977cac.0","@material/select":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B+Gz4AQ/9WAryivP+EikoBMvbMsIKN+JsnsLnggilNrk4xNf8fsvcNKOqPYhkPoh1h8gYXPvUnpgzLSmUQ1+eA==","shasum":"b1eaa9fb3388c27321a20cd8308442a3a4f6fe79","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.11977cac.0.tgz","fileCount":13,"unpackedSize":208329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOFICRA9TVsSAnZWagAAGiwP/jba9A5akm/Xf1+poWeP\nDTV6nhqrN9fcaA8o3Yw+SsMkN4e1pkVuFT1piiHuMIlIA18p1QQWDhrTy0YL\nIY0pxVkCEck0LMNHejblPbYZkDpwFXe9XMIXVsWhOu4IF1w/PQYXnkNtSmIC\n2fAYyiQkX7Zyb6AcJ2HuZiY5rUbvXHXPQveFYSnVRG/GCl8SfeQkNiR/66ko\nbgVG/eIX6hnyvYIpVl4vbJZ9PyQTYnBTTlyBAtWhOqnaQokH+oqEItn+pG42\nuO2YVSWBAgVHjvgUCIw13noLo6tvuXIH5X3txn59ywO65VeRQiyNFvfxQvyI\nlrBYWyADKVF1BPObOAZe0V5EIxT0Kv5T2B6j/pg+Py7E5o1D+12jd1lYKgwp\nk158/TLaA4KZEE0XMxcGpN2phCktgMh2+fC4aFCF7Rl9LTC6oVkcPgTrcFrl\nhBpFZ75yTBY2L+qyAVUaQDY69ZX1zzV8sXNSnvKam09AOB/v0rnHHvJKy/Ad\nYKODfgT+gwv932o1QXuEDcpggE0zJreZjS++DYHxbYeeZJTESAns3JEs7upD\nLdIGOWnHjjq/MwWCHNDo7rWJfPWVmWF07u1xF/cQd/rbnhcLHTgYK/BDsRVe\n628TDXu6/5WyulwnkWyC7PMfRQvfVv3zaBmMTfBhk2lielIxCSy6nUKpz2kZ\nIQJs\r\n=fm8L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGefcTrVu0EC1/hUHE/rOuOKaz2batfVCl2iF9EY2w76AiEAggU3finILWEoH4RJbi6Evl4N+zSIT73tTuRczx9j7BY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.11977cac.0_1618534728220_0.7179681972462368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-select","version":"0.21.0-canary.018ff45e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.cad489689.0","@material/floating-label":"=12.0.0-canary.cad489689.0","@material/line-ripple":"=12.0.0-canary.cad489689.0","@material/list":"=12.0.0-canary.cad489689.0","@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-floating-label":"0.21.0-canary.018ff45e.0","@material/mwc-icon":"0.21.0-canary.018ff45e.0","@material/mwc-line-ripple":"0.21.0-canary.018ff45e.0","@material/mwc-list":"0.21.0-canary.018ff45e.0","@material/mwc-menu":"0.21.0-canary.018ff45e.0","@material/mwc-notched-outline":"0.21.0-canary.018ff45e.0","@material/select":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kuhPCut/JszsMM18VV7TJ8fdXyFC27J5y2ignu3yuIaqTI4Tbg2pZ/WWCBXws05l498E6KMqQfWUub18Q4lOrQ==","shasum":"670cbb26552652e93c6790e2596b4554743b6ef2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.018ff45e.0.tgz","fileCount":13,"unpackedSize":208329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf4ECRA9TVsSAnZWagAAtgAP/Ah9X+sVPvoK/qyNniqG\nwIGvvODmBVWVGq45DXLUxc8I9y73DUuMN+B/XF0ApgaVPFhcf9P/eYlWpj0f\n0gaTQZNNvZSM9u18lwC78tM93zI2luAJc2lHqmFxNs9Ofs5gva5km/Z1wZRI\nkhGNrXPvdY6MBcpkZw7bjZOW0LBtM1o0YTUg0BFmIxWsumk+loB7hCTghaWk\nTqNz9hKzUDUp1hbaosCgzOU22bvB1tP+P2WoBsJbVyCOBOL0gNfSOOZS70aH\ndy2+rLlo5/c7jHsD7xeTOfvebIh8hMGeryCBaGYWFZquycG0zqVo/eIj0rBU\nET6IJTCQb6rzXEgSfeFB+y32dePscu7CQOIwzVCQDWXGFqFT0Ipq31pnhnBL\n8WIwItNV4lhA5+Fi1hL8ceBI2eqSY0mGVhtOp3gZlgHM6NHjTsB4/9J+c0PF\npONwmO3lzquxRwnqvURxp3GPgX+iLsxVQXhVHTEGO7A7cTBczIFaTfrhq7d1\nQnJSARnyv/a4Zs2wANzDC6VNubnXtDkmYhxu0yxihyLuxPW+SPJNOm1v3VQg\nJQHXiSW1gG/g3kbdyHwHVKqV6COlDXhhxrj1mvIV328A/WrIEYM3kFtYDFcF\nadCJlkvvo/x0IkevRecU3GqEzch6NI8UyJTAPAP27jPiJ0E7laRZd885/gBv\n43LN\r\n=Q2GW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDoxlPP1pMBcrD9eZ5iy+ixpLu7luulhTl6fMqSdMa3nAiEAlun1iHDxhpY/dcNBKkjus23JLHd7Is0i5BHhaA3PpA0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.018ff45e.0_1619131907985_0.4980931680107674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-select","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/floating-label":"=12.0.0-canary.197f64fa2.0","@material/line-ripple":"=12.0.0-canary.197f64fa2.0","@material/list":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-floating-label":"0.21.0-canary.c99d1fa5.0","@material/mwc-icon":"0.21.0-canary.c99d1fa5.0","@material/mwc-line-ripple":"0.21.0-canary.c99d1fa5.0","@material/mwc-list":"0.21.0-canary.c99d1fa5.0","@material/mwc-menu":"0.21.0-canary.c99d1fa5.0","@material/mwc-notched-outline":"0.21.0-canary.c99d1fa5.0","@material/select":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rZufVMsIvYU6b938Q8b6LWRtkRescN+RWN4AsfJ3WF7Q25INL3C9/EdgJMZkp2bOMKWc3sbg5n5axX965luKtQ==","shasum":"cda3cc177c3d3e3f225b3246bf10e8070cd7f475","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.c99d1fa5.0.tgz","fileCount":13,"unpackedSize":208329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxjNCRA9TVsSAnZWagAAEtMP/i4TiV8lWPED4o+pVqyr\nb0HGYRBAxGf+TFctXlxFzvd0JAvTT0viXYOrvibYm/7LMKmtmPUd0bf3haIV\ngkGrbm1ZtDMNQOzf0KlTdW78u1vi0cuG8t2OLWOu8yx54YdIseGssa1wCIVP\nRcEMXb6G7WzzBgvXVQhNClOrkU6JqFks75eIa8mFPEg/FjSNZYVmz2AuF1FG\nRbLi+cM4BfI/hSBP9iMuBA3f2b+ityzBgTP48CMe4EVR7xeXwStKw2JkWn3J\nqhJ2NIbzkXnD+KaJ/EFYD1yUXSeKw/+Obn1PyuN+lQje/NzZQlON13tf5Iys\nS2JpwW1wRqcLRGYMwMy4FjS0NoRSl/WWlTEvoWxxghrdFDnybQKLN5WEZ75i\nAWjioNb1EDiYhR246YbCfBdqZ5pL9+tuR7lFjWZ3wm8jv1L4nk+nviotZRxS\nMh/XFGxKjkQgCZoNijdwwRSri5UUQ0nLRD6HbsZh/qMNphJUYSASWylYdk/7\nfxedDLlyw2x+G2yl+2eTcXowqVTJoXtWXcWMeq2e0YYC418cNeRZUgFCqRwe\n3US782RppfHjEDhXqQmCPcXPD3zKXPMhskNyxL9UiNv9K4OI+jz6yq6Qv+Ll\nehiUaKM6MltDEWflDUxjl9qdPMNeXXQ3YxhlF94oXdMQRq17jOWYgtqbDJit\nsHzz\r\n=bf7Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIO9+Ku1gwM6+ueD9YvDzkIwAcxGiRcQ/h+4fP9yNO1AiA8KGPjmUoA7c3KgZ3bVIOW8cycIl+JfA0X3bMdkRMYKg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.c99d1fa5.0_1619466445207_0.9762973498005441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-select","version":"0.21.0-canary.eea9b304.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/floating-label":"=12.0.0-canary.197f64fa2.0","@material/line-ripple":"=12.0.0-canary.197f64fa2.0","@material/list":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-floating-label":"0.21.0-canary.eea9b304.0","@material/mwc-icon":"0.21.0-canary.eea9b304.0","@material/mwc-line-ripple":"0.21.0-canary.eea9b304.0","@material/mwc-list":"0.21.0-canary.eea9b304.0","@material/mwc-menu":"0.21.0-canary.eea9b304.0","@material/mwc-notched-outline":"0.21.0-canary.eea9b304.0","@material/select":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F7gtE0p/6iSHeXzij+ODBP8mdd1v+ebphqYhynx7dyhnayDmhFPL4GUravX1b98+ex3LSccl0yVe9WWPsYxLWQ==","shasum":"09cb5f191b7223ec077209a53bfe9d7f4ed6d75a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.eea9b304.0.tgz","fileCount":13,"unpackedSize":208342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJYBCRA9TVsSAnZWagAAAMAP/Azmk/nZWdl/rU1UrDG0\nf4nlz4VDlOVAMfwQ6IGTBqTCjcrzLpVYe3ha+ebFq8Q0pPOLbVHW9lWUKmZw\njo0tbBUACqmg+1Hh0HuKyTK3ELd36ufpnvppmb7xTrZMfxdBMH9gagMe/W9s\nMuhI9WMYROkZv8qhg45WO+33cyJBZc9BoHtTGL+5A/6AuTXOHkvMyLaJ0jOw\nN8/yeV2R6H9OSXSk5XkSiBBN/u7dBhnSz+Vt6PY91Iu1N9ItSYszGLmst4D7\n9WxzU43XQ4U9d8am8Bs/RFHU5vlLE9m8i+2C5QwydXopNmje/UbwpThsvveW\npYQU7uDaTzbUUY8zEolh+4sXf6QMd4qZMk6QOKrEOd6u0RLHJCtjDp4Ja6SQ\nYdmmAy9G7heU0qhXu8qhv1pCfzBmdUeFPL2U+2UlQWiCprk7FGZhNcSMYJiH\nBShEPdbDfAO3P2SU/NWOj3l/wNpdB4xWwyBMLf86Dp7sX0jyQfSzAQX6pHzK\n/y7m556Cc8N4JvSrSkJlFsFYEOJpS4Vu3eIi36IrbUGftMNEGu0Q/gxiNezM\ny98VT3gzroesE3PlDT9IWRrjqLKtNbdHHD1dwiQkuql+irMYSsFfxC4natDb\nZ5VLpkkl5OifREjvorLjGi69Cqn64pHa0rpLPIF9E87v678Sp5gJjgO8oqYV\n7FCg\r\n=wBph\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmyM09GaUjvqOBWyyX+SL2gpgSEoEl5pE6afTINoUgbwIhAJ3smuGQiQ5SghR3YXgXesQBjof7ZF9oQeyC18j0SkDh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.eea9b304.0_1619564032855_0.32960744115594687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-select","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/floating-label":"=12.0.0-canary.197f64fa2.0","@material/line-ripple":"=12.0.0-canary.197f64fa2.0","@material/list":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-floating-label":"0.21.0-canary.5dd85d0c.0","@material/mwc-icon":"0.21.0-canary.5dd85d0c.0","@material/mwc-line-ripple":"0.21.0-canary.5dd85d0c.0","@material/mwc-list":"0.21.0-canary.5dd85d0c.0","@material/mwc-menu":"0.21.0-canary.5dd85d0c.0","@material/mwc-notched-outline":"0.21.0-canary.5dd85d0c.0","@material/select":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vqGZTNb3n9gSR0fyDStjUvUOe81FO01s863vdTB07hdRB4HIfjPTOr3pKH7wDqn5k3qIdSjdL9QxsVg3resKUg==","shasum":"3c4f6f30ccdea6e42c6f9a5ed2bc4f8ddb126b63","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.5dd85d0c.0.tgz","fileCount":13,"unpackedSize":208342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKfpCRA9TVsSAnZWagAAkK4P/17xzysEvTTXTFOlAZ2d\n2rjrrO8GhBCS+1NZDnpMvl8XL4AA74T3a6QHJzSZb23YMfOsGV4VsF/g/c0j\nP7v8/Nl+fYoXF7J+3vseC/jGFD5Xryk0Vno/dzITwyZvJlbQcrOT8CTRqiwA\nrxXfFHGXY0meI9gXDJxk6FVl1Iyz3EWlGxnfuKgsGGGKgNwYZX501j6IjgG2\nCaIEoXbn1vlBiF+bBx43NE3EbHVDXqljM9pbCv64WS0Adjn/47mmVZbn3M4B\n3h2Qfj/9I6UAeUsfNBX5IaF+kxzMZKhxqiZBpcDKYLxebu2z38Hu+MBY3x/t\n8l3Yh+ivSfaAO/Yqv3x10MVctFzAN/MmbMl3UWMmiL7x5QkUol8gyLpLK+HR\n22AQ6LGKxEa+ecSfRgB2E235xPjCia2EouDno8bKju49HASS47i8ubYPcnfb\nZJXo/baRSIN9pkyDcdHpTrdPuZLplmWbSdZlXInS+Ah3FoF812tNAtKST1hm\nxumTmoADRs+wl+p5baDSsrQ83vohzMA3HqCHsGCz/jw9pMa9pATnW8xNxwzE\n3CiJTngfJOvLRPE0RRSDONIw9e//PBdTIFp9saCFuGPCE2GxwqYeBnHCO5Q5\nnASuO95W1chtmyO0xy19uuXm46mUkQGxoVEXNizJufF+b/rdjrgpf7DLAdh4\n0pn6\r\n=rpAJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEaclyY354LrPHOrgBV+oLqCzK3Lki0VPIU9c/0EMPirAiEA2TOlEbzCd72JH2NuU3J8ztw8OiVkOmk2VKIhamdl/GM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.5dd85d0c.0_1619568616506_0.2414554833290825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-select","version":"0.21.0-canary.cc813cff.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/floating-label":"=12.0.0-canary.197f64fa2.0","@material/line-ripple":"=12.0.0-canary.197f64fa2.0","@material/list":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-floating-label":"0.21.0-canary.cc813cff.0","@material/mwc-icon":"0.21.0-canary.cc813cff.0","@material/mwc-line-ripple":"0.21.0-canary.cc813cff.0","@material/mwc-list":"0.21.0-canary.cc813cff.0","@material/mwc-menu":"0.21.0-canary.cc813cff.0","@material/mwc-notched-outline":"0.21.0-canary.cc813cff.0","@material/select":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9To/QgAldvaNyrQjmARFFdXgdWWZmvGmzl0ZQhiK9ggjA4tEC81jly5PV11Nx2+w6etzSVu8GJAK9/vtkH3F2A==","shasum":"619f24abf53b853cec4896774e4d45b5b2e811d0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.cc813cff.0.tgz","fileCount":13,"unpackedSize":208342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHSWCRA9TVsSAnZWagAAZZ0P/jQnqEC1550a3PEekWed\nu7bX6QKyI1PCaG/puyGgUDmch1pMk0T4POV+yFibii0va0ba//mWjfJ5Ivxq\ndyO08lE5OH38+9wZmYLlBKN1RVp1Httu8uKJur5SG/8l2WCJLjyIp6eP/Ugx\ngNSvQxxY+tmR3y1msrsdwau1ss2wkwkRUp/GaWBz6ACv7XyHEllDxtq/ztPB\nQhnBm3FA7khNXPPlX3L4rSfUd+bStBPTg9L8BMEiFfNBfDofyN8Xt6lP/Nmx\nLYTjRPFpo8MWaxO9GKkJKp6nL78uZpGrP7iD8wTvI/mamGFIsqQFVSJnpN8N\nnmqzhb+cUui8ogK/Yt8PvQ+kCPcYggOHznPtI53RKJ28WS3D3/jE/C0J+NLx\nHtp9UT0yJ1rTidZvJud8ve9pMxOYDF0zsw4p6nl871tdchaSTj8JQdWRJiXc\nB5Pftg0+56pvHSfLemvP7ft9xQ4VdAluTdQtnev0Lc9xQVm7OPKcexcvs7xG\nR/HcHq+PQkQ35TjjXB9dfPFaEfhbBN98yYLGrwjpwuHSOb/1ULjWbeNBZVKs\njPnJDvBSvUveWFF5N05fTjP9CUr56+kHcnUdEFfO3Hc5sWKmS2nZ+yoSX/zB\nyatqCeUM5z6pxlj/8oD3+CofbtKjAYaAG7ynbK8eRS6XURaPpu0zuHNl0PBW\nG6J1\r\n=KCWU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeidiTb92Igd+SS3c9wQmhSfDJ78cdrwQxaCYuU4igmAIhAP6bn7UR9Ar6aQ3ZyUlaYybuT/7W69zKFObTeibWI0Tl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.cc813cff.0_1619817622150_0.9355052453859471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-select","version":"0.21.0-canary.0875e898.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/floating-label":"=12.0.0-canary.197f64fa2.0","@material/line-ripple":"=12.0.0-canary.197f64fa2.0","@material/list":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-floating-label":"0.21.0-canary.0875e898.0","@material/mwc-icon":"0.21.0-canary.0875e898.0","@material/mwc-line-ripple":"0.21.0-canary.0875e898.0","@material/mwc-list":"0.21.0-canary.0875e898.0","@material/mwc-menu":"0.21.0-canary.0875e898.0","@material/mwc-notched-outline":"0.21.0-canary.0875e898.0","@material/select":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-m9EMpOlSJ8oIl39a0W8clM/yVG6sSUeLGVRJgUBpikaImPwZPe/z+emx/A08rLiX8/xc3HQ7OsvpBG/c4zI0CA==","shasum":"778d77ecd44fab96c39e9c814a5f33ff7a769f8d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0-canary.0875e898.0.tgz","fileCount":13,"unpackedSize":208342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZvCRA9TVsSAnZWagAAH0UP+wbcBI2LMsbpsYJRQ8sp\n3aIUecwXKAk8wM85vapmPURqRxuDbEHlGPAFmpBkXfhyabBnIIG9nOQhTrzu\nqVktMI9Vi05/jHJrFkWKa5q4s0j4wOHNRqZtN9uYx10YakinpKEzzjUqpCi5\nkTqejNxu0wiejmmS9Bw3W1FiJ8qv6jMcyYZ0bGZXpK2lcVSB9QT57Wiez+Kl\nHkpJU+i+g2tf34QiB6u+rLRDHWFkAHvRzcE4BpLuMbbQ1Q4NE8rYs1s0+3f+\ny58FlJCm4ER5H9CrcQbUPmiCRMeelK8T7Mf0tBqILrKe1d9a2+I0rNt/aVQi\nevuxkVPNS5X/6OFV7CuSrTi8KBUmiDBioFaUI/qGxLZFbSZ9t7CoqZTcCjJ5\nxmE9cJdvSGPj/TYUhxDQ2y86O2O7L365bdHC/sBg/sWsAcLZkq2hJQl+OOUx\nKVUpqE+LEqgSaC8OT7BJd8GL2QWwMEMLERrSBNUs4Jn8F6eqzwBJIOX1rbiP\n44sZYQ7GGN66OBrBWyAVzxodkxiy4VqzuTRoqqz2hQoKoOQ+NLWTgotn0mSh\nD13YltJ4jrDCWejY+R2EJb/CAoaMrBIX+rBK2I5iQylpUU1pbfp/0vkYvNGA\nehX/2PYaJfWO5wZ4oUo1MeNNJFMrWg9GwbgDIYrvUM4fHOsDD07KxX6K10ka\nLw4p\r\n=4Kq2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCulB2jNf26EqOHoV9Blm/f3NHX+kw6g1qizwBUHrG8BwIhAOQoIf0lNtZWjg6+MVh94sHOu3yf+RhqMbz0WqhgMjil"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0-canary.0875e898.0_1619818095253_0.2817628884097818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-select","version":"0.21.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/floating-label":"=12.0.0-canary.197f64fa2.0","@material/line-ripple":"=12.0.0-canary.197f64fa2.0","@material/list":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"^0.21.0","@material/mwc-floating-label":"^0.21.0","@material/mwc-icon":"^0.21.0","@material/mwc-line-ripple":"^0.21.0","@material/mwc-list":"^0.21.0","@material/mwc-menu":"^0.21.0","@material/mwc-notched-outline":"^0.21.0","@material/select":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-sj/BJGxIHd64MDnhV6oAMeSqjK67xS0s9JXdCOtH0ExqGlfbynnGZjN98/jOQBJSagxLHRrOLlzcr8YI55qZgQ==","shasum":"876d0fd8ba64d5b5912f549321424fb849b2e299","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.21.0.tgz","fileCount":13,"unpackedSize":208205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmjCRA9TVsSAnZWagAAXJoP/2yfIuOZRzd4Y6FNF64+\nhqZa5YB091yGsVXPVGmQfJyYMYQoYOtxkPi7fr/KkIAfFf2h4DBrAtOgTGIN\nRnLDOPHzw3JkMISoi8bZy4evQ6E0U9okUqB4zz6c7niQz+kKVBxS6wmhk7hq\ndkFjfDakztu4qE57QRNZqGFMSJToKO2l4o/TgSE5nj3wM+YwW5V22iNKzkcb\nBzqMDxNwPWpjmjOiltwIjOLVDguig+r/+EIpa6S+EbRjxNd1GwZC7YXftExZ\nRfAZHKjISKswQ2wo2DhHLuKzseknyK8e6l+uqXUWI1p3zD7Iw5Ev9u77vnWl\nwqMhProsL70YlAR2M/FBxyTx0ALMdU5B+Ysukry7LjfHeCluMx8qx/Mo3Ojv\nqv5Er2/Pijekr5tA02sCWh70tYXhXK48MPYnun1T0gOxinptP0I/EUzkkNU8\nsMqHWbLGPO3El9GfcLZO68B0yspURHVcaJ+/VvoVSN5iXw2u7p5Xay52aX70\n2Yg1d81lVImwuvlCoHAnM9DjEuInYSwz33AH+joISbOj1JRhy68dH0yO4WXc\nyulL37OYwm7MTOTs9OWWz+lNG5Ydu6tBTBKVR07KtZsO6wp8OLnn40mHmL1R\n37FUl+ip6ZVvBDXNO/v7iHFpLyBN/vk/kIqVXz/NreQYHhMLYMcTFXlMKOeE\nKBbz\r\n=egF4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4jFuL1synpVe61FpWO3slkasVJPvygEg3nMxHPeXpXAiEA0/SX16wVGD0x7xw6F8wGXRqcecSlebeTc/uD268K8po="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.21.0_1619827107541_0.30606403910410496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-select","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/floating-label":"=12.0.0-canary.197f64fa2.0","@material/line-ripple":"=12.0.0-canary.197f64fa2.0","@material/list":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-floating-label":"0.22.0-canary.8f1e7e1b.0","@material/mwc-icon":"0.22.0-canary.8f1e7e1b.0","@material/mwc-line-ripple":"0.22.0-canary.8f1e7e1b.0","@material/mwc-list":"0.22.0-canary.8f1e7e1b.0","@material/mwc-menu":"0.22.0-canary.8f1e7e1b.0","@material/mwc-notched-outline":"0.22.0-canary.8f1e7e1b.0","@material/select":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-f1JbfcOUsvp01TSQ/lYi/9tvl/x7YZaDQzJQNZwO1RDXKyTEUpHiau6q4pnS8+X0Pavn9zYXQWO7Gd5ZSjwU4w==","shasum":"39ca7199346c22ecd585718f3b270a9b651c8d51","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":13,"unpackedSize":208342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtrCRA9TVsSAnZWagAAbF4P/ixwsOp3zr9j2/PhqAtN\nl3np1esElnoFt7Lr1fIZqXqNZgvLITmrTTP29KSK0KOHeov5ZwJbtpjOQQKH\n7Kh7BFttTHLrQN5fmInlZWY62aHDPGhHYMTKLohVQW/rvO1Ct0R4YIaLw0ZX\nuBTybz4uNhkHOS9XhBt7cDKJ2R86NN1y32D0/J8998DCMETHp5bsnoehlydf\n1ipBsp/5p2oU3yBlX7T5A/+SKYbmUxqCzJDivNjEplywsZ2j1lbrpJ6Wsjb9\np053Uko93Ue3m+xZgWUcieg5NKjOH5Ui8QEgqbOipoIWnK1aiGzldflabfbe\nyoB9UO42bTaBFzBzz2Jz1FLxmIYy+faLlshniGEMOL/Zirhjy8GShYUlT9ev\n+edFErK6bXnIqBMp6PKs0zsQy3UEHoE/7/IaxHzMAgNlgaScAJAPz7i7vIN/\nxsC1VFW+BoujWwpf3zCSg2HKP2sBTLeFOQas4nf6uyoyxWOEGEInlDd8U86z\nx1XawgiJVtnHPSnN92FhO6J0sEY4CIqc2iBLF78mOyhV0JqRTveah/Trpsrb\niPOw0f0McCVru4o/QcK5o63Wr9rGdjtoJptAJaMSmshfEd8OtavqMWesl5BB\nLLmTPjNfFCbmGiDYLJJeBC4C9dgisKpKEw4bD19W97sAUIkJQo5nFtDlajyD\nFe17\r\n=nijY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9pGjkl7wAz/dhWJ2MAgsDBnXOh6PBHaQ/5wEPBphhpAiAUL17n+hnD4jYo1XevOlvgXmImtcUwiNRoN2CLj4xnJg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.8f1e7e1b.0_1619827563254_0.04145625368964745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-select","version":"0.22.0-canary.deb0e792.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/floating-label":"=12.0.0-canary.197f64fa2.0","@material/line-ripple":"=12.0.0-canary.197f64fa2.0","@material/list":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-floating-label":"0.22.0-canary.deb0e792.0","@material/mwc-icon":"0.22.0-canary.deb0e792.0","@material/mwc-line-ripple":"0.22.0-canary.deb0e792.0","@material/mwc-list":"0.22.0-canary.deb0e792.0","@material/mwc-menu":"0.22.0-canary.deb0e792.0","@material/mwc-notched-outline":"0.22.0-canary.deb0e792.0","@material/select":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4EUNOZyjJRazCXkgZWxFJ5zxuauk84rWA2WpfimlwNiA+jW80boEr9A5F1m2Y+jRGmInW7m9pnG8y3jNIJEVJQ==","shasum":"b559eb1bc7806e2dc9a8a1b24c74f9f7c5920766","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.deb0e792.0.tgz","fileCount":13,"unpackedSize":208381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGyCCRA9TVsSAnZWagAASqkQAJsVaTUVQS0XbRyUnmCU\nWxGsLFcI56pupBAvyJWwh9C1bYWpt/UaBwu/FIRSMb1IkQL+ZnywBrWbtkWr\nTEoQdvlklu0rD41oAUUACFW6pRDrdGu3SpQ0PPvGLGtNvChMGSle+u+otBU/\n342bV5ltUtXMSi0IsesKbpcDbMXNfVOCcrQXc0SWZsOp6D63J0+uAjOj9UJV\nKIYzAKR1JOUqft4Rvc8BQUY8BKx+SnmZuaCXeQXK/BCuLBUuhmIWBwF6o3NY\nlo7bFqifK/DStgU4WJ72NnOGNlhpDze/5q3hsW3RozkHWH6nV1TEnHHAB22+\n5krFucHP72ZIVE48D8adHtbxmKpC9GdnNVAYAOBmfQupAzo1urL1/UnUlhaP\nf52/+uOOKgb+7ldum8Hd1RkaCHHp92uk1ZfZCSTGk4C7Zp0SjD19Z1aDoFcO\nKtLuo7jahIBNGTG30hcCtZYpOoK3SjSk0bPtUVlM9q0ZEsxENvx0aRYhyJYZ\nGilmTMCCjZEU4Zr/jh30tokLJ2vEzRiazJ35EEdFKkP5UYdGAlVjK3+8CfEq\nIN1hbrdbuCLS3vQJSY06FFBuE/hQj8xVK9xDja09KK4GqXxA8/ccjHTt3lNJ\nkUlKAv4OHQO+1W5aqglhbrEotPkVeiMlISGzq2hesrQGD5dmGAogjiq/Y6k8\nYG7f\r\n=NWwh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPG6GjJMXux7q8yR10Q0jHQTg3G+2AQmlaQKB1670NfwIhALYSosj/+u/zOqNJlK3OM3jP23bmtaHCablPBmhRky2s"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.deb0e792.0_1620077698422_0.13365595914042983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-select","version":"0.22.0-canary.a3ff615f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474836ad0.0","@material/floating-label":"=12.0.0-canary.474836ad0.0","@material/line-ripple":"=12.0.0-canary.474836ad0.0","@material/list":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-floating-label":"0.22.0-canary.a3ff615f.0","@material/mwc-icon":"0.22.0-canary.a3ff615f.0","@material/mwc-line-ripple":"0.22.0-canary.a3ff615f.0","@material/mwc-list":"0.22.0-canary.a3ff615f.0","@material/mwc-menu":"0.22.0-canary.a3ff615f.0","@material/mwc-notched-outline":"0.22.0-canary.a3ff615f.0","@material/select":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XSa58OgPvSgK0EHIsz2oioBcgqAUI/s4Rk8iG8YneMwXpJuCt28baNoM3YC1eBxm/IR/aoo2jwxKhc+ldfZl9A==","shasum":"8bbc2fb4e13b3d9122fa067cc12de477b660ffc8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.a3ff615f.0.tgz","fileCount":13,"unpackedSize":208381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpsCRA9TVsSAnZWagAArCQP+QACcuEl8fLJNneEKaHW\nJbACsKQuWhcO8UUY/vTHjeAoiiiH5CpprTLpLQU6M50OrA55n7ib4e/IbRH6\nFKYAtOuFBtEseBpHvmG5/wF654BPatYr/VGtRKZCpTQULBu3y77whVr9ngGv\np3owbUCPLEH67FsyRX+duZjIikOcWNaCU4zeU5fKUAhJtHviehby9c7wAS2p\nwkklxfaksfKj/ZUIBqaRpz5q0E59yZ/ePJ9eymosHQiyV6CzD/ohqkTQwXtI\nKq6OThZAiOGxyAa3Xmb/PLpP4SluweZ4RADI3KptI6z3qt5YEF3U7gsNOEBl\nkkXcpP/Ul8lAdUr9KjLCC661NoXXCYzJkCv5aIOnL4/v+cZ8WEJgLrVVWIvg\nZ/xwanu1sgwidgiLG5j50U35NCrDWyvXrHfyM7llKAjsrto8NFTjKGbojEqN\nxUBjlkUl+gBEzsqBwtygDrm05sWLyQmF+/wRDK+uhpx+38pLCFZ+XGF+jzwJ\naL3Mh3yyFZkyyUrmntmztO2WZx6Vuzwi+0nGWgJeXValjDk7NnGW9VdfOGq7\nt9Wm+o4UD98uwOyJ5p5G3SQBbaohwR9uLH6AOaGSVEVKeVL4Yt5CKaug2Qj4\nRmf+J/8bDdkLCAIHyoBTxs9wEEysC3hpqbRu5KD6JmM1M6x7c23DBHkRJRXg\nbn09\r\n=yvqM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzgiBUzsythiuQQ6OsnSmwYuCKMFEYbZswX5U5fN+GaAIgaeSxr67gvo/NHcpiZD4IxemtYUxtm/FvlAjE77itly4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.a3ff615f.0_1620081259898_0.11985005203331323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-select","version":"0.22.0-canary.948ccfb5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474836ad0.0","@material/floating-label":"=12.0.0-canary.474836ad0.0","@material/line-ripple":"=12.0.0-canary.474836ad0.0","@material/list":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-floating-label":"0.22.0-canary.948ccfb5.0","@material/mwc-icon":"0.22.0-canary.948ccfb5.0","@material/mwc-line-ripple":"0.22.0-canary.948ccfb5.0","@material/mwc-list":"0.22.0-canary.948ccfb5.0","@material/mwc-menu":"0.22.0-canary.948ccfb5.0","@material/mwc-notched-outline":"0.22.0-canary.948ccfb5.0","@material/select":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qGEIPfms9BD8OPjqQ5F+Vq5+cWM5vvQY6AUJsMOCUl2JNfiCfwAOyhQGIwlrErX17twtzN/chrxa5hw5PNMZig==","shasum":"d7477e7bc95ad743c4d50f13bd99460fde66aef1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.948ccfb5.0.tgz","fileCount":13,"unpackedSize":208381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEuCRA9TVsSAnZWagAAWlAP/RpJIxTYLr2TaeLOzj3+\noV3kYCvPXbzRaRA0SDQCgjwNonH8WGH/aoiBQV9V3ATUOahe9MtynWu1HNWw\n2d3cplsrFZ17bErK562zjEDiMBSyKdgmeKB+9MqKWcxCheDa0B1kJU+swIE1\njym7uyNOidEIr3TGmJV453zhlrO06Yxnu9kxjxkgsPGLDt0j5LleEZgmqZbD\nilbxG8NEA5xbod3a5SKQH0Von3TfDaWelvmAYsdo5MKZesAtnQxXEZUqig/H\n5g3R1OK7qprVUmxXFIDeYP8blSo3r9dA/fgPEUOmLxo/kCO0RLVIdFvAo0dA\nQwVhUh41Rr5XtFEIR7DPkrnfTbh4pvezFnDuSrpcRjPFQnCEq2JbJnJXyz9Q\nyxsv3s4eB2ebOS5ENpZyNKU/K0tWBgQ2QFo/d+xchhmDBHV5roPUSYKVSxS3\nXaIQfMm0r7fBm7sgmF1cX21PCHGRuDqrYwQr7V5pDLE8Eo3NWeYazFfn2xVM\nEn2QCwfyCObistBlO2Oj/U/umy74/8fAVIIo8Nuer9/e4yleTa9ysOpDSHHy\nRkV9XYRQRn/aPN2kBtCbhHT44X5GVE8+2gWRQ+5RvqTtIjL4PbZQ6dTNS4O9\ngcuITCFmgSc41mrAvyvkf11v75JPLaQV+Fe3bAZaydC9In9wo5yQsTrVnfTN\nuWTc\r\n=ztP2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrb31Y2ySEal/CKxF5PD6xUpPK+8wldrRvKBq8PXNGNQIhALSTaC67rjrGb/8g2N+ym229+6a6lt5thAgB23CfT9Dx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.948ccfb5.0_1620087086299_0.13289887752173946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-select","version":"0.22.0-canary.9f8337d7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.be999eb08.0","@material/floating-label":"=12.0.0-canary.be999eb08.0","@material/line-ripple":"=12.0.0-canary.be999eb08.0","@material/list":"=12.0.0-canary.be999eb08.0","@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-floating-label":"0.22.0-canary.9f8337d7.0","@material/mwc-icon":"0.22.0-canary.9f8337d7.0","@material/mwc-line-ripple":"0.22.0-canary.9f8337d7.0","@material/mwc-list":"0.22.0-canary.9f8337d7.0","@material/mwc-menu":"0.22.0-canary.9f8337d7.0","@material/mwc-notched-outline":"0.22.0-canary.9f8337d7.0","@material/select":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x8y4E99LWZAxBSz+20C84ct17QRo0muytnAyXz0eu5c8CcEeeBlrD7KyKUr9Mpz1eKN7zD4NOXkixTD235kzKQ==","shasum":"1dae7f47d0ee522f74752ff1cb74e770a3767c93","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.9f8337d7.0.tgz","fileCount":13,"unpackedSize":208381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZR0CRA9TVsSAnZWagAAPmcP/1KAxiNhQr+tZYLgcaBc\n4neFcPnwh3ISl3EyHyUxqzpKVj8MxsTXQKPptk4hvSS4z3l8cWuHihMZonOc\nff+Lp8sEB9vWaXnxsvkyuhNtdzneWbv2QRDVKmq78ngbck23NQYFSUZoWe5g\nTpx5pi4tRX1JwXCQvIjtMiIBEJlddig7HYjOx+jfnzQ/TZoo9vix4p2NWX+K\nnmKick/ooC6AYfHCu2v+/SKXY6RhfNSMUym2M/T4AVqJNwqfTbAnVCNmu7Na\nL9kqf0usD2obT2/ZVEYayxF4OdVvGn7okH4/yA5PbiFg1wZDSMKmuEtGaMXl\n50QNaVIT2wt39Qtn4BF+U6KRdX4UJRsey1Ftn/MGn+RNAs8GoMFWMAHTqcxT\nn0JDo5y0yLCggM9CYqg81/ZOw+HSEf5kTZRCgGnSgXcjNWIs687gOZaDJkUu\n0ajasC9X5mk+yiUSYVWVUqaWY+cH1u8Ve5ubLMQxJVSvQPBtMaEhuahf2GRx\nD7PwD4JPTw6ahA83zUAXS7E/MkmbDcyJBJcB0g1aPFDLzS+xmIwwjXlRNtUv\nzWrdFDUasgwPZq7/o4zqqlLYOZPlSDmvTpD+4bWCrj3O22Nhe1bMQn77kYTU\n0D0YqN9dvvvgHBlq8qMpMBOH+MqnRTYfl1VpsEe20BoB1YTGaB0wD6E4Azz3\nW5SE\r\n=TobB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpResb1LwXRqWaLZ6RUhucC2cOoGq1o0+GbNauLIoCYQIgJaBwEH+zA9nxR0guHd9srxAaEveatFRW+9/N7NnbMKM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.9f8337d7.0_1620153459946_0.5474282735916898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-select","version":"0.22.0-canary.5813480a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.055d4f10a.0","@material/floating-label":"=12.0.0-canary.055d4f10a.0","@material/line-ripple":"=12.0.0-canary.055d4f10a.0","@material/list":"=12.0.0-canary.055d4f10a.0","@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-floating-label":"0.22.0-canary.5813480a.0","@material/mwc-icon":"0.22.0-canary.5813480a.0","@material/mwc-line-ripple":"0.22.0-canary.5813480a.0","@material/mwc-list":"0.22.0-canary.5813480a.0","@material/mwc-menu":"0.22.0-canary.5813480a.0","@material/mwc-notched-outline":"0.22.0-canary.5813480a.0","@material/select":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sCCoXcuquaODwJDBHQkxAZ65anPrL7BH8DX4sVQXXy1rbbhnTtDI5lB1itzd4PYcVbyayb9vGmuiTNhlZsp30g==","shasum":"b2062319b946cd333e6e1b872e2da0840b73af15","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.5813480a.0.tgz","fileCount":13,"unpackedSize":208381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuNBCRA9TVsSAnZWagAA7foP/1lzZWI6fC8UG53pP5/O\nAEUhoFs66EMVG/RmCbhsubsIxtgDUre2npPFFwZvA3Xl3U3cvMYGowgPwoj+\nifIq0X2pfwbvdm5ru/U5pPXg1Qj5pQtVbSBOKXOJSDP4oHvMBHhlxtx6ymRt\n/evQQjThqXMS5ozRaemV3ujZXmwjfak/y+H/XyVVpj6pttbiGrGL4VfbMqj2\nH2G940R0HFcX8eIcAu6SLXwujJvIyT9LgKFdd+OUz7CMJn737ONkSqX1pVrM\n5vOsCLjJi4SXItEXfQ62U7PAc/s3WNbiozJD5FxCjAyQyNKCyoYE167xHbLb\ni42we5B7ozZlLoacnihH+E5xalOrDaZi1d22tM3MdhTqLRrnC4OwRsJELd6Y\n99ch6dzUObupQTk00Vgi82+wv9zZmrLcNC7HusW2Ns7hQDy+Z7jI0PIo6dNV\nHNuAWV0hzMqYPurTYr6pdREu8yZEiy+n5j5EWMAh7vvjOU/iAifNbsADlp/c\nlG34UBVEjJ+GAud2jYwAauix/5h/xcOQbgkRGbSpwxzfNek6q/M6fit1PMdD\nmVmRCDnLkmA4fPPs0hRsOTXuiCYbEpiYgrXGago9JLWp/sQgBnm/EDvn0aLy\nvh0mSlYo85YlmN1C9LmQyGS6u2ovvxqVJIJVjkJZm0P+9Y46dvrS8fiiDoOp\nlG0c\r\n=OPi7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHTH/L1mcrwjbogMTrLYol9bm1k4NdYnaxm8yhUqO16DAiA6XuuEPwsJBrpdR5Dmu9RQ15NykoqmPyaP+xj2ztTfcQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.5813480a.0_1620239169103_0.43364991435573264"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-select","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.03f525f9f.0","@material/floating-label":"=12.0.0-canary.03f525f9f.0","@material/line-ripple":"=12.0.0-canary.03f525f9f.0","@material/list":"=12.0.0-canary.03f525f9f.0","@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-floating-label":"0.22.0-canary.ab7fc1bf.0","@material/mwc-icon":"0.22.0-canary.ab7fc1bf.0","@material/mwc-line-ripple":"0.22.0-canary.ab7fc1bf.0","@material/mwc-list":"0.22.0-canary.ab7fc1bf.0","@material/mwc-menu":"0.22.0-canary.ab7fc1bf.0","@material/mwc-notched-outline":"0.22.0-canary.ab7fc1bf.0","@material/select":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IHY+Ibmt909tgEJruuqGdyyXVbYgDGNbvefgoSy7lJRoGXnxy5MAa5vhHBoc9D3ALYlfxba7pZCuH5nEJUlu3g==","shasum":"bad78d07b72514ab6e186128b4f3cf8edde85092","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":13,"unpackedSize":208381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC6yCRA9TVsSAnZWagAAp7oP/1WOiVyx5WBTEYizkS7Q\nfpDF8sjtDwaV92cMW8E93LI1gXX+qWnQJNOvaRzFO0P5YO5KHe0aI6cKhAOf\nDF4ALFK9Yy4fqLVMMCUcbOgmjo/JP8XTgrPbSnxE//tpa/LzWIXx4FWWm5Yh\nAWhLGAcqpSbXS77QQ50Xl5QZ0WuPniT29JxFhhl5AGOE6Zvrui6HyuAlVJB8\nAF8LRc54kJcLfLEaPanicMDeug9gNYYFCIEs5eHnkKgQDP6BUkiZv19W41Es\nSXOGK/LFMbO3MJog+dqMlSj+R+7hrCu+88b+LSyPBKSVDnGMHaGlRpI8VblJ\n+5kEqfzl6QJXYrsKbBOjy9CexfPki+dFl9iPt3iIZO/M7hlKl8X6s7/XhC2B\nHhpRYddjqODicqr8FRErVUaAvTF6QBed98wbdPKxpTYUiwKxthKo5Qp3Mc56\n0Al4g9co8toeqcUlIhZDgApa0t/m7cV4MuqmQalsWQgnpgH41N+3pMnuZNmX\nliPH8hjs4YQedOGkIkWN6EZKZlbTL7kqVsK34w5GC0tcEx8HGmJFh6FxgPKM\njy/UpP+1l8TJmFiDxe7TqaFvMsXA2oXc6bWgiFxG6OpSWqOnz+8bkNEINMhT\nLcp956thyl1wToL9KYPn+fbvfAV+xfhp3xeefeTkoUdegsAinNVPHIE4mk43\nzhry\r\n=MV0g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4p8r5/PS5BASUN6qFubqk5cg2U77raWfBCSRLIcuvIAiEAusSHjL/dTXw/pjDYMbhOMVXkURrAPUHz0P/k3guXdA8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.ab7fc1bf.0_1620324017766_0.5857872472801633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-select","version":"0.22.0-canary.25693d60.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/floating-label":"=12.0.0-canary.869d890d4.0","@material/line-ripple":"=12.0.0-canary.869d890d4.0","@material/list":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-floating-label":"0.22.0-canary.25693d60.0","@material/mwc-icon":"0.22.0-canary.25693d60.0","@material/mwc-line-ripple":"0.22.0-canary.25693d60.0","@material/mwc-list":"0.22.0-canary.25693d60.0","@material/mwc-menu":"0.22.0-canary.25693d60.0","@material/mwc-notched-outline":"0.22.0-canary.25693d60.0","@material/select":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tHntOKqNT8XAz4Uf3id4rB8foAR+RXw51Waz830MLiy5LbLW+CqTbOBd3OzHruDzDItPKw6iBeexhAzXljRHAQ==","shasum":"a370af135eabfc96be6ed0766cea0f7be56d0ae4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.25693d60.0.tgz","fileCount":13,"unpackedSize":208377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbeqCRA9TVsSAnZWagAAzpUQAIrAQsSAHUGGXvu4IOuE\n5woT6JDOIunNBGkL4SdBeAbNA7krPZOWswUMUiE+ANVdD0MsKP2RvGisFbCm\nmjDMOqPtOvyz13XyH3O34BtlQJ/enXjZ1dtPMwvHr9ZFV1JFPL+cSSOO2Klz\nokrGgovtAB/K5XKd/CYMWD9Wy3BaLrGZUeSeIdDbSKtuq18zLIedtu21VQWF\nvOTtzuJ8GYu2IiZyKYtWhwxWgSJxgrV3PqamNf9oBvyAkIZ/D7a1k5kn7LLa\nIRu5LcCRNU4s8AEdHXs33I6JhaDqX9Z0ioXDYEWGfrRRdA0FhFq/9Q8SI2hl\nV+lt7SedG5/LaTATEBHAFTTmMggPNyxQnHDUGkfQ7CUGCF+XRyHrV869jPvd\ncIvswHkLztG0lvOG5XegfObIYjbx5lNYKlhmIab7h1nns3PlNSn1Cpx29zyI\nwP6UldzzpkoY8lnElOkZ3B4WBusv5ZkZo1VtGls7XQzwvqwM765QxPyVOCPA\nStRwHJe1w9cYzg3n9bDbG/7ZGF76D9e9f+c+f8qfNv5YAnU+Cw1v1I8bPf7A\nIkCAIz5gvVfeYQphyg9OYhbMcaUyH7IowgtjV8ex9v7Su71LyU24Vr8tcSiz\nLqxTSZxo2ThX8xRVYIx4WcgN6EWcB26bGJpsz27N8CJ6/rzD9AMirinLmc2c\nhwCh\r\n=byti\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4ogpR3HZ251hBvzPWcWyTw2ePXhF1s+mhOY84BvHxeAiEA7zFQNT5+BO3f5zVQRa5+okjAiC9QYl//+rIaGLAdzSs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.25693d60.0_1620424617856_0.8384331884999803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-select","version":"0.22.0-canary.c497962b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/floating-label":"=12.0.0-canary.869d890d4.0","@material/line-ripple":"=12.0.0-canary.869d890d4.0","@material/list":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-floating-label":"0.22.0-canary.c497962b.0","@material/mwc-icon":"0.22.0-canary.c497962b.0","@material/mwc-line-ripple":"0.22.0-canary.c497962b.0","@material/mwc-list":"0.22.0-canary.c497962b.0","@material/mwc-menu":"0.22.0-canary.c497962b.0","@material/mwc-notched-outline":"0.22.0-canary.c497962b.0","@material/select":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6o2GEJmX4AM4rw3yPARkD/nw5pPyoSEG+wwHQHt8Fidh7pVbTUgY+O3GwcKrnyyPJn9IC3Y5WHTqZwKteVn5qQ==","shasum":"3255bd9d93f08009d5be10e25a65066e42ab1637","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.c497962b.0.tgz","fileCount":13,"unpackedSize":208377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb01CRA9TVsSAnZWagAAumoP/AmCr6trIuXpjCeuysQT\n4BpjbW5koqWJ0UOZ4dp52SmSLw3Tti8/SnvnHOJMfUVH0qPyEMVTeT8/YK3D\ngOa4+L8pDrhYBSukWwl5+jAVkbDLTJso7lQW60sV2KhPyaNhNcTeSC7QMcVy\n8BGi4V6tykCxHkenYTrDHWi+sO5u+Nys7TLpw9Crnq6KTaSQEW2ugHPVSwjZ\nkea2YKUVlU94hdEcP97JL4u8HMKa3zxh9Z8lAUp0HtcijBSYUE6csdEs2+ia\nIrEOmgjHOPtO0jjOlKOWkZPA2AFS3upOJm8MnYpCV/L3OWt43R6KEluv3ZS/\nbk1WXCMFyuhSn2WW3hy6bebX4N2XhH6F7Da/8Gzq9O3GDiAuvDMSvAUdOrKD\nBFOjHWKLpdhqijBL1XaW8osqqKubwpaMZGflKcxcLJXIfpYaYWOClubTlzSw\nP2sVc9ClGhaBhf+5xVG+szL2/G+ClATWX+ae+NTHK13BB5al4Z2vlp+ui8nt\naNkA2ir+wJ831foIEJOTgoC8LY7k0JCoY9alOievI3cyK90rmNjYLbnEvOOx\ntsY8qr8o5CGTtl2bAw2tqZi3YpERzxja1mclXewruou+EVkkt++YvNGVuI/Y\naUptYF8xFsOsnSOIfAiO2oLN7YDqm0DHW30kBFPRv6IZUqBDcgMba3E/oFwr\nfFhd\r\n=sbwl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmAqH4kkgc6yEt/taIvVoxXO6fXBIg5/ubU7kgE1IiXQIgZleExVwegdIJ3X6qAYJ+ezzLMBQoXfhGN2pgGlfEIVs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.c497962b.0_1620426037458_0.30013403158895624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-select","version":"0.22.0-canary.e300688e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/floating-label":"=12.0.0-canary.869d890d4.0","@material/line-ripple":"=12.0.0-canary.869d890d4.0","@material/list":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-floating-label":"0.22.0-canary.e300688e.0","@material/mwc-icon":"0.22.0-canary.e300688e.0","@material/mwc-line-ripple":"0.22.0-canary.e300688e.0","@material/mwc-list":"0.22.0-canary.e300688e.0","@material/mwc-menu":"0.22.0-canary.e300688e.0","@material/mwc-notched-outline":"0.22.0-canary.e300688e.0","@material/select":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dKW+HBu925+guCMJRcyh8Kbi8lePxQQGgvgTmNtKLNKyJA+Q3JxFYcgJrjzRaLxmmcf2PG9+ET/MBranXTi+xw==","shasum":"a206fc8e0f26778b5ed730065b84895b3e847aba","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.e300688e.0.tgz","fileCount":13,"unpackedSize":208476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb5ACRA9TVsSAnZWagAARq4P/1qcC5EQ9VNlFVlPj2mr\nO9T5iIXNm/3JXZKszyqGCHPxOUTBa1mqK44CNRUcifvrjoR8kR0+TOmAXBTT\n41hdcHtAmaZaf0f8pHzBasaFs9M89OCKA4i+XiS8cEUA4BLyDRwUSG46Jriz\n3Um68DVviPPc30Ht6HnKS2qQbP3fxPK05nB/x2TZHMtSAE5RtcZZc+AQDRi1\nSFgA2QCvVLtWX+Ux9MyRKY7+VoJUMEWhQMwJA8Vp1RET8ecaeCJBxIrgO2u3\nQJ1pTtIVhkJiaBQ7pnLNJOjTqmnHRBiw/B3ltNzSZqMvNJU/gvWePiFhJ1L4\niRHnNOBp6BmBklqLgkR13hUQcbxBjN7X3Uqd1tAue5zR1vjpqxPr/K9VSLPv\n+/KtE5gi3Iy2nVJEcWe10XYsoSZHaH6J+KiLZ/jmWSTEc8sPtTbNoaEQ10Ml\nH/laotX1zjxYjegkHUxF23WFqrlq4+eZ1+sz4XmE0HyU8XxL6plPK4AMnowe\nCtpcYm4t2ZGAIn+3/SWr93eySDfHV3h1u1ctvcLH1nm7zVMOex4+X8kRMJCq\ne4xRlcZ78sKaJmMtObImWqzm/B4cQXUT2aYKW4ggvA0ZV/k0f/4NvqGOLw3e\nA6f5hNHQBMypYmk13ErmF7d1L2jWq4PwDmVI/DCTpqA5zWGhdAMntNVyDjNu\nJsm5\r\n=nbux\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8HJqkgFtSS6wFt6VAdtXzV2GOCQpcrxdWXFAfGdyobwIhAO7nRmHYxpw++PZAzb5yE0W7WvwXp8JM0sDrm2FhEQsg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.e300688e.0_1620426303783_0.4169080890582737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-select","version":"0.22.0-canary.d70287f2.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/floating-label":"=12.0.0-canary.869d890d4.0","@material/line-ripple":"=12.0.0-canary.869d890d4.0","@material/list":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-floating-label":"0.22.0-canary.d70287f2.0","@material/mwc-icon":"0.22.0-canary.d70287f2.0","@material/mwc-line-ripple":"0.22.0-canary.d70287f2.0","@material/mwc-list":"0.22.0-canary.d70287f2.0","@material/mwc-menu":"0.22.0-canary.d70287f2.0","@material/mwc-notched-outline":"0.22.0-canary.d70287f2.0","@material/select":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WA3Ea4+QxyKUYJ4fCxCLFis5oO9xlfIeQ8fmFFYgVpRnBJ0CcAS/2fqeVL4Qcr9jXokoVtGBECTABCkky82BtA==","shasum":"e62a706b4995c975c73f90653a196595e2d54bcf","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.d70287f2.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYm9CRA9TVsSAnZWagAAurcP/287OGfYVXGDVmKMIs9k\nKEcL3RuoiNNpUl92PT8b6tgVY6YvI7qLzW/AsRviGilmX3Ed3D5OJF6Gw9Yi\nFzk6HGW76t3ACmD7cyFrFeiMsWCe9NWvMRD4k7+PEdNHCtRzUBIoTDSJu9+1\nrYXBTqKWO+ze36D3dhXpzSnGRN2UyzBfF6Rsq2vRFt2VrV8i56oRRlPVld4P\nfsb8fhqudjKjqAOvIHeKzUP676BFaLewfWBDXwV2AKcnVUT+slwdeo1bNRaP\nkBLv90ZLCZhNIOrrqw+An/7Wya8QXMN5lsNs2JQRJsJWqPpeod7Sytkk2TyV\n+F7gWNTxlD1SkHYIi9Q3FMcmF6w8/icvGGnxHUbPAq4U5msib8vLvC5UanuD\n+quiD9A05dUmZ44YbycNQaeUgJM6gTZZhQTp8qWE2PbZW1tCK/+YypXs1guE\nMwMJ8QJgHp2kQBS2T4HbT/5IV2VMJju214fDOZbx7A0JjSVvyuRJLnAtx63h\nvgVp4P1J6Axizx4oi1c8yS02H8u4GuAgnXA1tEfrh+NzPRoNtYSq/CQy+Rr6\nUBcs20lcDNkBUgw1y9VCyJZ8dIOKpRV/TF7SmyLLrBPkIP8fDYSTSGOW5smT\ni580Lmu4lsCl3t3kyjl/y2xIU7FWn0NraS1ztMnpJ0gPK54rrLWQY4CLircJ\nJAq4\r\n=E25e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8+TcSGd2LGTWGOt1AbN4pTTPUKF6/jIdz6Ye8WV4BMAiBHpuSBd3xF+gYEbbBlcoZBw6wTAYovfLHspfWJX0sJMw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.d70287f2.0_1620675004691_0.9956502662518605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-select","version":"0.22.0-canary.02e841b2.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/floating-label":"=12.0.0-canary.869d890d4.0","@material/line-ripple":"=12.0.0-canary.869d890d4.0","@material/list":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-floating-label":"0.22.0-canary.02e841b2.0","@material/mwc-icon":"0.22.0-canary.02e841b2.0","@material/mwc-line-ripple":"0.22.0-canary.02e841b2.0","@material/mwc-list":"0.22.0-canary.02e841b2.0","@material/mwc-menu":"0.22.0-canary.02e841b2.0","@material/mwc-notched-outline":"0.22.0-canary.02e841b2.0","@material/select":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-imVpd1CLQCMhZ7pu/qymozwXPPORakaH0EyO+g6e6KG1mg5hyP7PXuoFJ73UqXqvo1Kb/jz/hrNVOmhQ5JNDNw==","shasum":"1f0680e77f1ccb21ace8d34477c3f5264fd6985d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.02e841b2.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZkICRA9TVsSAnZWagAA5NMQAISeU1IEMnZHtBTYF12J\nTo3nMq6z5jXtbtxQVqOPfJJbtDkIC/tJsqEbX/T+njDZOZPwTEZQC6pd3xun\nTcXuVJJkyhBRYbCYydMYryJxZMRmAXzNt2zezMhOO+nw165TxaW2Zyo33FgJ\n0MJvI/08RYqyZydVewc/H8e0jY9m5FANqprI5mHAfWlhHQRVL7OpD001ayGo\nSbGNNaC/qu2RJRTJhmj5O6ER3r+uyvKO1rQFxzODdrYKZJOM7H0TOpZ3TrW5\np184ptF6LO4Es/DjY6azjiHmrkhgEHoddOp7htheXavV2+o2PfJ7VPqI9yDu\ncV1IgD4QFOPTwJXmTvT7XyzQMJgvvwwcuxNwEzV9mmc6RoPBXU7m6x3eUzAA\nGhzOX+Kurz8HLT/VWrFfdNNd8TxmT7HrzsWWsuOoETcFuE18qPH1j/bnTof+\nFxzenlvI/7fuEOU+PcBbmwh1wH6i9zKa9JZhUU5XhqBwQb41wvhkNOr0LxNt\nBMIHjHZkbZ//rX5oRLfnIUzUU8RCTSjmaSKM+TXORNVxn3zpfBb2X/aXMjv2\n92rImwv4RlbFPD9l9UP9U3YXwkiiPlM9SVdENHYmtFwpCCHIatSECeEuZ0cY\nNrwGHVrR5fpDOej3LZfdQMqRGC2NK3EbN88q33wfHIQl5PlQ6kk1/HzLbyc/\n0qIO\r\n=eShM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE15Wby0tOzoX9ZIbgPhpRRBj1TFqtQ27ImqSZd0nsHuAiEAlUn7xsTp+VvhA2rDcZZxdcZ7PdxUOm4dlBVt7+yomGA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.02e841b2.0_1620678919732_0.4239589925402427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-select","version":"0.22.0-canary.badda2f0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/floating-label":"=12.0.0-canary.ec22e1da9.0","@material/line-ripple":"=12.0.0-canary.ec22e1da9.0","@material/list":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-floating-label":"0.22.0-canary.badda2f0.0","@material/mwc-icon":"0.22.0-canary.badda2f0.0","@material/mwc-line-ripple":"0.22.0-canary.badda2f0.0","@material/mwc-list":"0.22.0-canary.badda2f0.0","@material/mwc-menu":"0.22.0-canary.badda2f0.0","@material/mwc-notched-outline":"0.22.0-canary.badda2f0.0","@material/select":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pTLGKo06twRa4HyERnJ1OHsXCpcGrghE3clvxEJCs07AEspZD3wgsOrVQH8+JIEHAHXf+eYnW6MdlmvxP/QGoQ==","shasum":"056a744011ab5cbb83a3c61d2d311ee0f198b900","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.badda2f0.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdFPCRA9TVsSAnZWagAAdqAP/1GWEBvo6HT+Ka8+GcuD\nkk0BZ8/T8D7cj7SaoBHp44ZCSWw6DhJGMp2ESEBEhVj3AhSTwtvoxZRZm3k3\njtBw5cH6lfLp9ycF5E0xMcv8X8YMnouKl08aUIi2KF3toQs+2BbqeNgfj8N1\n8GVi7uBLsQ8QjltO1HwZ4DtDXS2VdWYIydhYyKxvVkvrNWZv1BR+zItDXqpm\nJSxqekIq05iFP4ofR68BJ0ajjwp621A248VYxlPSGZwkO0tA17uT7xfvnxA3\nuuTUenZtMY+e7klDqDX10dhZuMb0oiZZUEFqccHbz3QehlKHB8FwQuaUk5eJ\nQ33aE8Gp2NFw5IdF0IV0o1hHOV8VBNj0fm3H9fMP7zpsBoyPpXnLvB4Xjtuj\n2JDHMnM+UDj1d/R+W0V3NkLBQ2QCL1vNfDBzKeZzr+oFCxKVvVmT6ot4ko8L\noLVN6C57XzptDeb1wbw9rDe2cMSiJKMHGJryDT4EG9LVDr7EPnZfGnLHje3e\n+MXm2FyYYPwtpo67CrEWg2cY+zF442yq6Z7DJ7htbXI39M2tlHtdtKtwpVNf\nuY2EAFSBNvJsHbY/8eTvorSCQAyUQomr4HKTIT/zqn4rUT6ClOrncTnp3Lo3\nB0b6yMBW+4MQbnwqGhl+gmUZbrQ1TbhWmUxIEmWmXcUFfiLyU0kjSUxGqCoD\ntzAl\r\n=Z7dO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwp1U6e+6CM6H/vkS2a3qLb5I5utSQOE/kfmgvO2FzEAiEAxwAwYkYol+/6n6SMDOU3PhObE15Kl1agDsvp2P7xJ8w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.badda2f0.0_1620693327095_0.14208284559284956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-select","version":"0.22.0-canary.004aca62.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/floating-label":"=12.0.0-canary.ec22e1da9.0","@material/line-ripple":"=12.0.0-canary.ec22e1da9.0","@material/list":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-floating-label":"0.22.0-canary.004aca62.0","@material/mwc-icon":"0.22.0-canary.004aca62.0","@material/mwc-line-ripple":"0.22.0-canary.004aca62.0","@material/mwc-list":"0.22.0-canary.004aca62.0","@material/mwc-menu":"0.22.0-canary.004aca62.0","@material/mwc-notched-outline":"0.22.0-canary.004aca62.0","@material/select":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xNJzmSZ+Ui7lSAMOty/jsaPdujjrTjDBBw3dK+WzhZ6qB8Qo7e764JTMsYPq6f5gFnFvWAjSqkrJtiSkSX+1UQ==","shasum":"621750256ed1d2bd02abf16d70c5e48497ada341","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.004aca62.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmsfOCRA9TVsSAnZWagAACQsP/RnxH4JPEUmTfGw+BR2P\nfr7N4qh4efqtc7eSv6pEssHrbFSKGam3UAfP8/bsVKnt8w6d7Mn2DtCCrp98\nZI2UYuM9PnyUO/BSDl/1IdCgHBGByveiqBHV5XxN9lGV+pbRqn9xY8LI+K15\n6RG/7CKl/6luNNzJbZtUDUUBqDMeyDBLvsa/F2QZkWEHYBk6z06/x8het7PJ\nfNHVHpeqPbVjTZKRnbAmsmcDUvV8mx+jgj4UjegdbN/l1ReLrmCH7nT216jJ\nXYhj8t/zqehNGiRIv6xpXtVzzUixoFFrEzRMnnz+sGCe64U+P3VnHXrOy8hu\nhJeM7+1FD+2vErbm38iTN5tPqkHynxzeVAxbz5zVCl85XZeMpUeL4e/bta/+\nGDvfUaaGJTnax479Wj+SEyux4IKEfAnrG/7yEu7683RMh71eLg+HUgAPq1RY\n/3M7dFr6hvdy8Nz7qOuuk3m7yvrDMk67Lq2/VR+a3hvtR/72PJuPVwQNY5H5\n25MRbkMFdpmVQfHdySRBnocbfwjGd7jiWZIXFC62Ah/2W2un66zykGqBin6F\nTDUAtZeDSYtrTHnpSC+UfrQmZfIyzJm9pEQvIvSudPzhxN43zr5780jI+Z+V\nTr2+eD6qre4bu+B2u15UiZy+/o8vYexTGlsLtLP5gP6EJI49it/TuAW1hNKe\n65Mi\r\n=+8Qh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBpdKCzgspuKND7UdStnMRRdSPpWOu1az+4V/NdEzWytAiEAzCNB0Q+lEd1NXJC6S87+S2PS1CfrvfVl6Gu0IvU8zOA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.004aca62.0_1620756429547_0.09852361909761975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-select","version":"0.22.0-canary.4af17446.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/floating-label":"=12.0.0-canary.ec22e1da9.0","@material/line-ripple":"=12.0.0-canary.ec22e1da9.0","@material/list":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-floating-label":"0.22.0-canary.4af17446.0","@material/mwc-icon":"0.22.0-canary.4af17446.0","@material/mwc-line-ripple":"0.22.0-canary.4af17446.0","@material/mwc-list":"0.22.0-canary.4af17446.0","@material/mwc-menu":"0.22.0-canary.4af17446.0","@material/mwc-notched-outline":"0.22.0-canary.4af17446.0","@material/select":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xHDgBiFijaPMaBie4D55iunRWnKWofxLZ/S5/1J33u0UDJsXoL68EqZFc97xYwaXs7/ZFVNt1ux9ZgHNosl16g==","shasum":"10a22c6efbff34057c0fa7a58719df40c0751fe2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.4af17446.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtEgCRA9TVsSAnZWagAAyO8P/06LuLShpYoFCSbsIgUD\nkv4ezd4JM3yxnSjIS4PLkWAJvHT37Sh4zYQh7zZBdYyHnh9aJCOEFunMlKPC\nt3eLRbqBEyMInRnw4NQ8ZhV0c8kFrQV3GSxV3DfF4Zu88REsYX+6uWWutV1I\nDKMBQjpvN42jSUOibLIFXwCfSQdqz0Fbe6N3jFpR2THtromadK9GFB7Pms2+\nn9j62d5wliUd5z1u+H6F7k9cRa1v0iNxlalRtfh/yEx1BvcZF6na75raCqyQ\nNdu6ExC817hdulaqBT6EjbQBIp3lVt59oBjoJbq5xzF9oX2AJTF3ucheZ7yF\n+y66+5AIHDeZ8IWQ13d2aEXGtLbsadeJCrZj7b/WiG5MHUjQwG9EbgFOgI++\nAtYh82F4FmHremmq60AxZqT+qPRpyFsO7ucEg5idnVJvI6HK3WklIF/AD6wz\nuHjGIyG5DQ7Zt2nS9EC6pHbcu6Qyd4Ho0OQ64FmAkwmqK1aSPNGSkxYs7952\nzvJnaSiu3WajtPku/ArzG7RDxMI1+O9KQYMWbGFyarODBu1K2yQjuseESmhN\nhnT2iWVXbDs3pjqBuHZEckDODT+tYjBE8bMu5aW7OIJD2ZQ7p4MZL7Xe7CyJ\nvMsAn6rwhiV7ywjK1pC41WPHwBktxG7NbK/ZrS4EImk+4JIENbe+s3OFzBh0\nMIZ3\r\n=XY90\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+g+USf0nbJgWp72DNszhMsaPZBm2ADTHX5D6EFWFH6AiA0EYllQw3Dtow87cwmrDPDFslXn1uK9Ka8KWQiljXQEg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.4af17446.0_1620758816364_0.7586902789017913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-select","version":"0.22.0-canary.b94d7187.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/floating-label":"=12.0.0-canary.ec22e1da9.0","@material/line-ripple":"=12.0.0-canary.ec22e1da9.0","@material/list":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-floating-label":"0.22.0-canary.b94d7187.0","@material/mwc-icon":"0.22.0-canary.b94d7187.0","@material/mwc-line-ripple":"0.22.0-canary.b94d7187.0","@material/mwc-list":"0.22.0-canary.b94d7187.0","@material/mwc-menu":"0.22.0-canary.b94d7187.0","@material/mwc-notched-outline":"0.22.0-canary.b94d7187.0","@material/select":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FI6qfkKw7YuVXs/EnUscvPCsM3YQpXQnHWS8oBUSPjUI9eXhnDufZ0RBgMR8PmO8sfUfpkCpM9ot07JqDWKyKQ==","shasum":"a70a80690d76a5963a47312dbb6bf66386bdae19","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.b94d7187.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJoCRA9TVsSAnZWagAA/uQP+gPZBmbKieVHpsaQcHhr\nUMh7xhAMnQFfrO72FOmWWqPffUaArFtho5/zpyxpGElN5ol8S0DhICHvYvxk\nJxjBDJnPKjK3WI7584TFOm1/v9QB4d8J0aXqPWQRBFH7yyc1xf/+3UjFeELL\nR603f3ONW8xGVsirS2TW6uk+6NB1qdWZe1bKPB/1nTSvpDrLW9V1mm1Rih4w\nuQl7X7nkLut+ey8uAxCYmAI66AzN+3c9IiXI+djeI+FDdZlxJ5JxV9tdasyC\nFsTTxCXFpsjTTwn3/3CyDkbFEAvEz+dkLFc2h1kyGCwJpgXxt20PULrGhEZe\nA36Y78VRioD2pHeNvhzJLdEmxWlKqV5LdzQFuMIE+tpFxCOAw2KVv8gzDO9S\nvA7FvyzGPxP0IGFsaFkLNsA7OMsxQ8eer1HqEXXm1IgORghlnqKYlh0itZTn\nmBUEsl/DBecDfIj11tDBRwy4YdFdNCmZlL1esGw9FP0k95w1fOYCxR9wbImW\nQ9IFc5F41hxhXfCr2BqaA0/81k5Ok4JX7Jv3wx/xY7aTVgTBylmMVKwg+Wwu\noqV94zoq+ClJQdVdncLOFsZua+GDBNsoIVGKbJGelyzSH2FXRRxAZ+dV9uqS\nZUw0LgtcpyFsOMQ6r8iZA2CGnGXwIiY/I3JHkpgRrobs/4Nv5Yqy3lhbWKNB\nNlse\r\n=bUXK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdRnIbt1HcZ5T06TINL/OvPxhu32/QI33K7L4SyjiGKwIga0q42JXrxCa+PaDKPl19CB9Hk7Um4kZQuaOgVEvpf9c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.b94d7187.0_1620759144420_0.0753449848732537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-select","version":"0.22.0-canary.4021b2f9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/floating-label":"=12.0.0-canary.a23ecb682.0","@material/line-ripple":"=12.0.0-canary.a23ecb682.0","@material/list":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-floating-label":"0.22.0-canary.4021b2f9.0","@material/mwc-icon":"0.22.0-canary.4021b2f9.0","@material/mwc-line-ripple":"0.22.0-canary.4021b2f9.0","@material/mwc-list":"0.22.0-canary.4021b2f9.0","@material/mwc-menu":"0.22.0-canary.4021b2f9.0","@material/mwc-notched-outline":"0.22.0-canary.4021b2f9.0","@material/select":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qcncPybmeznoTqW/YBY56gnGgsNEkeGtQE9wgPQjZm6QqfRRhYfgYKOXKNbFOL+j5Df3FKp/p8oiyj7REIONdQ==","shasum":"1f8dc53518d793d5c4137cc641e6926c16f5c9f5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.4021b2f9.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFA0CRA9TVsSAnZWagAApRwP/3dGNCy7jTtl+cijlc6w\n1iZPLCrZ+y0lbNj28Yg6iEi7qkigrQSj40Wo9y2lgPB7Mf9fWSL5LVcCIhOJ\njopZdrJU+0QhRvevf1kKTdDVVMo4nopAUBCYkUDbDDJ3/ZaxF92KDzONa8OQ\nZRDJ4XFkHWGSKiEB69w0KPTsgOLbjLvE7DxqJI2wOC4XP6KoSun7BMytNADc\npVqsq/Tr6o7G6Da+IgFVTVCUya1AYnXhFW/EPhFXD9E0x3GL0nQE8Ok8lBfn\nWqopqO8zI2ndaRTD151Ed0bPynTisyx4bpH9/l78951TQxUy+EeIYlgwSIzc\nrSJ6kW5hjozt2TDH1HKIInVYq7Kc1CzLV0V3b+MA/DDKsJQ5BOxSsnUtjfvW\nnqQLdzyyea7c3l8WhLvGM3pe1Y9sB7QdpPJ0ow7q4sJs124iKUOI+8PKEne1\ngSOkG/Ao7UpXfsRrzA7iIg8bzSQCeDhh6GAbr8n5lCJy4wbtoNOX37v/K6VL\nntQOIoY3ju4yYdb+pwbTHckFVxQQMWlyOBWV/TOITTXlY2MPi3LimPf1lwNO\ngR/vQTq9WRGYSBU/f+QDm6yw7rV8bKkVSkIYu4XflZzi0qPF6HuWuR2pYFyM\nCOGvzEefUYVKz0DpsqCGgbGtTLsXutoBM0exOpCxBRX71ykdT2xQFQnz1V7r\nBg/Q\r\n=nxST\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2COU7LYq68k8eW0gZDyp5alXolTiJ1t5kLi+nqWQ2XAiAYsVUmb9+AjtTOuVw18hrDCqwQ9c1FMl9FarPbXBnLNA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.4021b2f9.0_1620856884152_0.45978813241859884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-select","version":"0.22.0-canary.6a5956a3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/floating-label":"=12.0.0-canary.a23ecb682.0","@material/line-ripple":"=12.0.0-canary.a23ecb682.0","@material/list":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-floating-label":"0.22.0-canary.6a5956a3.0","@material/mwc-icon":"0.22.0-canary.6a5956a3.0","@material/mwc-line-ripple":"0.22.0-canary.6a5956a3.0","@material/mwc-list":"0.22.0-canary.6a5956a3.0","@material/mwc-menu":"0.22.0-canary.6a5956a3.0","@material/mwc-notched-outline":"0.22.0-canary.6a5956a3.0","@material/select":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ISfajDHKcH2XYxz+PvLjiG90i1b+7SF9NQkz2VZf+Y9BhDpYrw+caYkil0rcYsGmVPiz0zob4J51YjSyCixkPg==","shasum":"e203847f84d7d688841f4b0d7a5e3200e1b14890","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.6a5956a3.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFQeCRA9TVsSAnZWagAAZykP/3T2x8Cr8MZWj2mwUtB9\nMf8Ey97ZifGeyMrOW8c38LAevIbSOfTWulK4tSJXZ8ksd3uaOa5hpmXBrQXH\n07M/Zmw51wDE6QCjLaeblaqpqfyiV30UWwTrVVEi+dcUl3B7N39bo5NHZAox\nxfDXysgcaMwCbEKdZOxmd3MGHiffflm7rU6QNDvrF78r30vzKa8Dar3iIznG\nOerLYkxCT+Xf0Y4V7V9kQf1NRKinGBHgGXFDx3mfGCaPBjpeFBVbS3gkNwUu\nM/XIx4AXDFn+ncQGXc3E23SVOH2afKWb84cLbinLeDUBTCO0I5jQ+zW32lo1\nLwWmDX4t5tiDKNtDHBTmweanOqB0hdbUFpubNJymc2Rq9mPx40qepACt6rjE\nNimwg/8IVpCAodDkG5NV3vU7llB6iPoRGXidi8kSohsYh03p4f6WU1G70xev\nNChLSQazbhslmENXto7uupp6rlt6o25SHUUQVprA1o7RBSKkZKt7BWcE80r9\ndKML7B42xg6on0wWNNBbxJoEvQ1bK4cmRHFtsNbkGDkdtCC2SD48xZQtk2qw\n+NJnYJQrwbeH+dOgLiRqYrepjwuXbinEwcNJGVBlrpNLk1rZj92I7t/rgFMl\n5MniooQmb1nnIoKYP/4pHS7pJwYMEMaJcCTEcVcbpyuyj0KtqYpp0T6ddNT3\nL2mB\r\n=qvZ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDD/bbpo06GmWKgmQKw9VM8ZppLKN2zU83QvjOVWULKyAiBi5y8zkMjiIk/0pCRy6xH/DLAEI/5UW35rD/WBfpawkA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.6a5956a3.0_1620857886462_0.7191174087740804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-select","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/floating-label":"=12.0.0-canary.a23ecb682.0","@material/line-ripple":"=12.0.0-canary.a23ecb682.0","@material/list":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-floating-label":"0.22.0-canary.b6e8a74b.0","@material/mwc-icon":"0.22.0-canary.b6e8a74b.0","@material/mwc-line-ripple":"0.22.0-canary.b6e8a74b.0","@material/mwc-list":"0.22.0-canary.b6e8a74b.0","@material/mwc-menu":"0.22.0-canary.b6e8a74b.0","@material/mwc-notched-outline":"0.22.0-canary.b6e8a74b.0","@material/select":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PHWZIZdxMOq9Weo2htGAbkmPOQLwPu0uCReacRQCwsR4DWFnJ5VvpNFgYer6PNRtRVzNibYfpzyJVhkSqPNJQw==","shasum":"f2f0fa14a6b04d196419fa630f625e466839560e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.b6e8a74b.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7rCRA9TVsSAnZWagAAupUP/RbZaGKR4nxjaZTt3Cik\n2KGQINiVblOVuwYKaz0q2CGYiyLamz+GKVpfnIe/e5GzjsdSVkojFIqDyR8t\nyzh62EvMeT3R/K5W0pI3Y/m501r7TseBX2h54fAeVttPl2tJBDaDVlct2BXy\nKSxrJiYExFqi1jFfO+sJkpJPVJzH04ifKSybYs1Mwa9iqi+6NNj4N+4gTWYH\nJil4tV6o+X2SzVs5xVAkqdQAp8yUr5ekIUDr0I7pEI68rn6wLEJwPO0KqVXQ\n7dYDOjFMAAiGXgIf4mrQeEmOIe0e4vM8W2A2FQgDaqoJX3js1nCU6CeCYW2r\n1c7oG/yiZnYg3pNFOOD+k3alw6jZk6qzCs4sdd2SN10SNY+Tky74u9PrcuRY\n0dQjo1aO7qBgx5mksiSFZ6ecSYSkq59I+THc08/4lLqXQRE7dbIvIU6MotXG\nCSd+sPhHcKRZlka/u7xlvn3LQNmoPMPkIdiu2UE0kd/TR23ibL8tZ1K0sS3Z\nmwxzytoSp3Yp7M/dxWlFW8dKW6d5Lg0BEjA2FRhPGYTdDUFQKRsT1eiMAt9O\nih8RhBQxe59oXA2y78AotusdN9bNVMzVkn9ADp79cUNIZZ/TXZbqR96DExXO\nN4qYUHEaTGbyPU1hQzVNnk1ziq5UY9vYd9tpYPBGFAbkM3bSSN+cPlJDkZMS\nXYG0\r\n=Qcf3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOZRl7RSnXH2dFo8Z5YqMPN/ACd5hDDKaSVuH+blRknAiB7yurtQHCxFDYg6sGN+Y85b+9JXrphO4kF9jFb7IHY2A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.b6e8a74b.0_1620860650613_0.5636792575942262"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-select","version":"0.22.0-canary.c94e1030.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/floating-label":"=12.0.0-canary.a23ecb682.0","@material/line-ripple":"=12.0.0-canary.a23ecb682.0","@material/list":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-floating-label":"0.22.0-canary.c94e1030.0","@material/mwc-icon":"0.22.0-canary.c94e1030.0","@material/mwc-line-ripple":"0.22.0-canary.c94e1030.0","@material/mwc-list":"0.22.0-canary.c94e1030.0","@material/mwc-menu":"0.22.0-canary.c94e1030.0","@material/mwc-notched-outline":"0.22.0-canary.c94e1030.0","@material/select":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iu+bBN6EVPG93Hv5gLYV4ImU2EKnovbuHdkxferd2UOaN6iUGMmmod1N7dzTmFKdvEYTEM6JQQgiZp73PLF1cA==","shasum":"ec54576ca11fc87967ab5965f663e50d6c44ca88","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.c94e1030.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGBECRA9TVsSAnZWagAA81sP+wQiXw9PCqF4uQIRy3MA\nW+WY8ZHScCUDZfFNKIBeMATI57wrL2EAlpsLfhvO/3zGJe1pny3JEJHMP6Mr\n2lflSBsRaeDqB7kULluXxepf3PJkFaGsyO32EilQjibj43sJPfaVARWjLVIY\nC9GDJv0Be1SoJYBCZQzvyCmkVCzYZWKJc+D9mln/3oRde/+u+z74yY9LcaZM\n/wwU28kmeiZ/xDEDpHZGJ8m1IxIc6yHwbDNwnIIGb8jv7X0KxxyMBgJk0R86\n0Y02x0T/yx6pz4taWij5dqt0joWxxOAo+4BigwBHU+G7YbX8Zuc7Zd4BYvrl\ny+El0WwERyLM1afmir/1sn5dKOpRznsRuZlbAvadNBmGSOh8LE3lta/cLOcu\nAr3LnCrx4FzpS+p8RkPuiB8EGuTzl9DxZwsTvadF+OkC+jDl9dpWRPvsjR8+\n1GPgmwi2QhL+669Q612OqGAwSr3fL8bsOzByuok71EIandCUkHAKqnmpoJKF\nSAG4IILHLN5LMHLt1L2xtLlO+Q6/iqTEGabGbvnxxgMt31ifStygfU42w2Wh\ndmcjYfXjRZdmqwdgehD+9p7zSipeViohrdKTlD1w/O1idlqRBC/iENpPnuNL\ngI9JZx+Gizf9XW4rl5a8nljTQ7EQUy2rizmtFs/KPqAPPZ6M+gV+VK1C3/CK\nGD1j\r\n=qBtc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjmSy7d8djuUOfHFygzAjSpe0xUcAcpPBUfUDm2+ktoAiEA4Btc48IoY78j/xcta2FyruHvE+koMNqgl8lnUI44eTE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.c94e1030.0_1620860995855_0.5357819584984838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-select","version":"0.22.0-canary.40a34e35.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/floating-label":"=12.0.0-canary.a23ecb682.0","@material/line-ripple":"=12.0.0-canary.a23ecb682.0","@material/list":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-floating-label":"0.22.0-canary.40a34e35.0","@material/mwc-icon":"0.22.0-canary.40a34e35.0","@material/mwc-line-ripple":"0.22.0-canary.40a34e35.0","@material/mwc-list":"0.22.0-canary.40a34e35.0","@material/mwc-menu":"0.22.0-canary.40a34e35.0","@material/mwc-notched-outline":"0.22.0-canary.40a34e35.0","@material/select":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-T4zktdwGcsDZuqrpKilcfIvpB6BllcjmkhzBhjbtVUjh3HdCOgb3rq8+R8jnRpyizXJc1fJg3Ul+Y4Sj26+FIQ==","shasum":"c5a489e40a37430b23eacd65f58cc88383d1ce59","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.40a34e35.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGvQCRA9TVsSAnZWagAAU/MQAKJIcEDCwiomQ6suQdtF\nxhJR3OnwFiyYHGEauW5o8h/ZEgZS018sYOvKIGwLUvZV7cAnvM5e8GNTSsSP\nCl9cls8Iri4vVs8PQIW/14RerLy42ML3WyzJLSdZe6S22/eolRdJ+O1IZRjX\np/jeXRuJi0lUBOWMNI2XhfCNmq6Gx3j7IKDMVmyWnnap25PvIHD24xd0+mJM\ntSB3LiR95q21A2DsYeWQ6j91EBiduCrVz04ZIQ9ttlSbGNgoGoWFlWWwmy5L\naqArdQBz+FfzN+JjBp9w3CtDUGSuAHAUaEhLABr9GqXwbYpNQiqNDuTe27Wj\n2eTy8UkcpyGHXJintZA0gK+0GrSGv6NcWkXawfXkjHZFJIjV0PWQi/49q/n9\n5CaoPQDDw++gzC4oGUaY5umB+NREanzUZgrBNZYFBlZGj5wROVJhbBuqHhQY\n5qLT2NDLnwmapofUbZimL+g0gyHVwtHv/EK/T+9+RM9PuolOZOJkBXjnxAuT\n28msIt4N97guqtC9tiVN7/silCN+767EFejpzYHlWNiUFJaLw0BW/+J60DWn\not7OrnlWrAHN6GYwj7PNNcBX+q6Hslgj1STNBqXhZTSXYbTAyl20sbhF8W1w\nSY4b6zgxPMKXYBWaM5zKbrSA1xXN71BiT3b3MWvVMD8yorF9y/mXdZEDJ2Eb\nldWU\r\n=331W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFNqp5nU4KVILIBnvTI6slzB+K64rN2wCIKe7oDCfU+wAiBjxtCb2JjR2J7Y9qnuHkTFPdpo0nJ03vycg57BT9y63g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.40a34e35.0_1620863952263_0.5840999811692296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-select","version":"0.22.0-canary.1be14d2c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/floating-label":"=12.0.0-canary.a23ecb682.0","@material/line-ripple":"=12.0.0-canary.a23ecb682.0","@material/list":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-floating-label":"0.22.0-canary.1be14d2c.0","@material/mwc-icon":"0.22.0-canary.1be14d2c.0","@material/mwc-line-ripple":"0.22.0-canary.1be14d2c.0","@material/mwc-list":"0.22.0-canary.1be14d2c.0","@material/mwc-menu":"0.22.0-canary.1be14d2c.0","@material/mwc-notched-outline":"0.22.0-canary.1be14d2c.0","@material/select":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K2mqx69Zz0e8Hr0WEzRLDr3OR/qpMJVMRxHuXIUJ2wmqBwPEyul6rxAvQtYkyb0ehUi0fGrRLgpV1uJz9XkNcQ==","shasum":"e4fdcf076a17b783d4ecaae1a5838a481e15eef7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.1be14d2c.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbuCRA9TVsSAnZWagAAxLIP/0YGk/sARsQZ72NwbXIn\n5s0VBIz56huDEm748MhihfmJpgbXuNYXot1g2qmYWk6OxEcMgbT10yUm9S9W\n7Jkn5hekQd+jxIQvWh3ZgWUJ7sbKpGkkL0kjVFCdgEyO5IZH+4+sKMxEJOul\no2p0D6XEWQauMRJ6T47l0RYibnrfs3qlpDGav0WYEwzkZqdMd65b4VsP+k40\n3z1RDPQ/pIL1Y0btDuIj4Rs/YQxGKF866w4tr5Ty1hya9DJww9oSqQgIGk4a\nNfH1s+5U+rBJJfpBE/1VCZ/1/99PPGaqRznkRoARH/HWiFJ85MsAC05wLb4E\nqbkJDtu4l2aBfDdnUgDjsYDqf2GpS0BekTd45/wejhlvFE7F0INHR1hMo17J\n0aumg1EvHPfiuvixjO49bwui2Ckb3R3+AWhftfl+mS+Hb7R6bbHOYi46RNeN\nstilRz7fckiD2ArDOsjciEjGzeSC2vggoBoL/+qslkPnBL6+Cx8U1UFVfQyR\nZdIqxLNs9Xu8qEmvei/e3HORAtms1Ll5k1uO6YqcGcf1CSEZN9tsh3bnqkYN\nxtkLICAPPAcjE152O+9JLSptXR4LPA0pEZ9zzsVYR9we0b19M1kKFg6IrbwJ\n+8QAFwbP0I06XKp5Nq7V0WydNdb7LjAuV6GhU6H1BSRiB9ktTUznXyPJirmu\n9SAq\r\n=H9zQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxeivgotDffx8XCS/B78HSbj2Qfgabz0QMNAnIyzGa8QIgXE/6vBKI/ZGmiuZeQkUwiBFyiXziW4O5HqfrHxMI27Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.1be14d2c.0_1620928237464_0.8443850592671411"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-select","version":"0.22.0-canary.87dbd64f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/floating-label":"=12.0.0-canary.1a8d06483.0","@material/line-ripple":"=12.0.0-canary.1a8d06483.0","@material/list":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-floating-label":"0.22.0-canary.87dbd64f.0","@material/mwc-icon":"0.22.0-canary.87dbd64f.0","@material/mwc-line-ripple":"0.22.0-canary.87dbd64f.0","@material/mwc-list":"0.22.0-canary.87dbd64f.0","@material/mwc-menu":"0.22.0-canary.87dbd64f.0","@material/mwc-notched-outline":"0.22.0-canary.87dbd64f.0","@material/select":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6ekXhOEvXMfllVqrlWZ4nHpsLZVakI38KbnCD1Hxic2XyR2uHEECCNWcPfDEA7A7hkK+1a7cibUiezNwIvLCTA==","shasum":"c00a9512ca47ef5eb20e3b7b22d0813e8419640e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.87dbd64f.0.tgz","fileCount":13,"unpackedSize":208320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuSiCRA9TVsSAnZWagAAcIsP+QAd8GFRA8D387f4ZqHg\nOw69msnjDsGsqPEJC+T24Dm45YFzTVyz/uCadBV1HztsWG97rLgbbNv8L4+a\n8xrWbqwqan8tyorM/hXvpPGiqeBrI3cs5n60vCgblXvlttBsLZCWn9vfWOu8\nCcX/TJ55eBGtucIO5B02KRDBpNVLc5fikcJsrVNu9q5KPswlfczp2qbcUa4d\nPNN1GaegoC/4DoH1mhqct5Vh6TAtDzjS77AW1Gl2AfwOhhJbA+T3vdSkut/S\nkWnQImKg/VxbZcdJGjbmWnXIjNnkTVQ+pD5k8j+IaQBbAfO1Qr6xVxSlSXfb\n53wkmF9CjbhkUUBRtcp3c+JISfx1BxUWPWxV9QIx2GamnHJwK08u/KaV/UJr\nmB6h4OsMLNtx3gGzivB8vVYRTC8aZsJGm2ss4MLBcM2xdVulRI08TmVWNLbd\ni6OTcMyKF+ILX4G0tHTsrY+jwAI8MtlFoofCsaEenQ+D08Mqf1ghryXjlAO3\nvGtCwTCNZK2X978qvMxoVV7+Q3V9r23RyqMK7WxW/dZCnbB8HVUWaSDPlrSx\nhEgzYIg72VhlJACbdVh1MGSGcMqm0SPJcQIMtW803yLpHoT/Dc5FlFkuY6+u\nQQanK8JA55AC8apLJguz+qPU21Wnjf9dPWAwOW0ifdQz4/HOn7LMa2FsiDnk\nX+dT\r\n=xLOX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTOP/3HzVyOZMrc6KsVMlFIMy9Q0YUh7yrmrCFUJhzuAiEAg5MqXDpuxdOOekz0e7TaAv/8/89hJ59hZfSelRDzPXA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.87dbd64f.0_1621025954375_0.5718199469932987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-select","version":"0.22.0-canary.c452e4da.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/floating-label":"=12.0.0-canary.1a8d06483.0","@material/line-ripple":"=12.0.0-canary.1a8d06483.0","@material/list":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-floating-label":"0.22.0-canary.c452e4da.0","@material/mwc-icon":"0.22.0-canary.c452e4da.0","@material/mwc-line-ripple":"0.22.0-canary.c452e4da.0","@material/mwc-list":"0.22.0-canary.c452e4da.0","@material/mwc-menu":"0.22.0-canary.c452e4da.0","@material/mwc-notched-outline":"0.22.0-canary.c452e4da.0","@material/select":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a9DftLGUP6kuJ8MDWwq3FJhk3rKwj5d9+3EcTRUqayX1375OcfHmd93QvFfpG4WlnIMgN9SIQtvJLBIhCSYkgA==","shasum":"a501d51c3bc04b3660ba245543e8d62e37835906","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.c452e4da.0.tgz","fileCount":16,"unpackedSize":291853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgov0gCRA9TVsSAnZWagAAOyEP/31qzhAuPwWFMzLzHco5\nzuk7owOjW/UAg7ocMyGR0FdFUQwlMMPRD6FEFTO1n97anaMCko5wlxlwyhrI\nHVLKa8j06627IEcWN6MotoiPyxeN+193V7mljwS3H9KrU8Nq8s9KgXiK46Pq\n5M/GpuiOexQZk8I+A50PAnhbcf7u6DOEFzIzpxsLR9iSbYXhrYq3lulrltey\nkJKmznnPXM7TzuLaFdWfv4/9wJMBbwXkOI6sH0Ko3O1yOZoCJ1tx6EnSnV1K\n+AW/ztGCy+kXHMDIGJpL4U20BmbA7GELJFfwVinC1RxUIKj6GwkAx9u0cjmp\nR7s/I/F3S+qX7hSmckYdvXA2alZge+tbhaiNmbeis6//f8b9QSA7L0p+nMa7\nAVl+fUzYRgdPw69KIQNBLESJpDeodP1Rs7LtoDB7hS/BEIDFJa5CDXPW4J8I\nQ1N4s2DRVan00QRHDDSbHT+PVNtuJ+JMnc+AIrQbB1EDjbgogZ51zMVaC840\n6X4uuMYE+SHlTd8gGkq8wK8bt8I3p7b1hd5LUklkDmMwHJFwKW33yV+ABt2F\nd+SOn2CzoQOEhHfZzYJnsrB01oJJn6UgGAbV/OcjQ4/P5SJ4XDq792cr/3We\nxHXObCdDAU9Bhk9LrUlrxQuuPsM95W4j0eWYK3Y2/Qg4+TBJdaNpa9C5dOwb\n8EHe\r\n=uVZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkHcjzdsco4vgL8b+/pHG6zGbX3gfOAhpmeUS35Aht8AiB3pfr655qffL2+RqjSFCF2dNCcMlPC/KbAzQ1DESVwlw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.c452e4da.0_1621294368485_0.30576752722066014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-select","version":"0.22.0-canary.2212691a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/floating-label":"=12.0.0-canary.1a8d06483.0","@material/line-ripple":"=12.0.0-canary.1a8d06483.0","@material/list":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-floating-label":"0.22.0-canary.2212691a.0","@material/mwc-icon":"0.22.0-canary.2212691a.0","@material/mwc-line-ripple":"0.22.0-canary.2212691a.0","@material/mwc-list":"0.22.0-canary.2212691a.0","@material/mwc-menu":"0.22.0-canary.2212691a.0","@material/mwc-notched-outline":"0.22.0-canary.2212691a.0","@material/select":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-d0agqHg6Xpnr6gO+XGpuGeEet2b5WKZsGCnC3L2Pn6ORLjLONX5jmArANPXj+IGxE/qT5cqo13OL+bTFQh80Ig==","shasum":"c211de97d83fac9c56d9b8e7c952e8508856a104","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.2212691a.0.tgz","fileCount":16,"unpackedSize":288294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowH1CRA9TVsSAnZWagAAtTIP/iZ+byM9LwL3zyvUe4+R\nfGRwwn754MithIsjCfuRdSdErc7dG0wRsF9I2gXbxGH3c7zFYsbmOhzMn5pZ\ny1VI1CKrEHrVkNJ4PG/hshj24q7pkM/u42/tX3iGgiwRRrNjmUt9QJWNq2vr\np6I7+si8S2XBTnfhUkFMyTeQ1NzjNhWIA79t4k4hLGXpgU2pGEVL8FwEBhpZ\nWgRUZiVzTcrYiMbsr562gP10ugs0sD44fiTnDBFw8s//pWEl01DCIQul9nTy\n8QDaFPNFw4lzM4tv2LH2SqIEYy+oVbeeTtt8Lb+NmF/83N2pOHdGqNUYH88Y\nby6arh6dDiiKtdVdxRg0ZtD2M/oUOuMF4SZTtowtDZAUD2zF04PppnR3SNLE\nf8t/FOkYoISwcNWW4HYhiY9Aps+53jaOyCegmM/Ov9RnGaPQLT+r5qHC64eh\nCgPHDFqvZWWNlC7bhW3kScNKvD/MuKslXzKhMLL+6WTdgxAcjPOCxGvuF3ax\nQTn3NcWBGcZQ+xp73k+yL+wN4PQztceMLLG5JMhwoqWTL0z27UPO5QVafLug\nfsGL7hhsKSn1lEpMQSmgnQ/oA71EvYPws9wiSgh+S+Ka3wNopqvdYaQJANii\nxNGlfkIb7Y2nJ5ogkllYkQHszNscFJc9dvBPlFSnSw2uwIPOEU7RUEM7yN5r\nL4oW\r\n=M1c3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVPFB0yAHqxZ/I1uKZSKbOmSS9t1T5cZKVWcImmxSVcAiBfz0w12X7gQPy9Q2s39vJGCdyllu2FXS+5PMhB9lRuSQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.2212691a.0_1621295605331_0.9202838900530661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-select","version":"0.22.0-canary.f748ff2f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/floating-label":"=12.0.0-canary.1a8d06483.0","@material/line-ripple":"=12.0.0-canary.1a8d06483.0","@material/list":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-floating-label":"0.22.0-canary.f748ff2f.0","@material/mwc-icon":"0.22.0-canary.f748ff2f.0","@material/mwc-line-ripple":"0.22.0-canary.f748ff2f.0","@material/mwc-list":"0.22.0-canary.f748ff2f.0","@material/mwc-menu":"0.22.0-canary.f748ff2f.0","@material/mwc-notched-outline":"0.22.0-canary.f748ff2f.0","@material/select":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nkDNOxarOeClqdToRnCND9CBnj5E8ezgKZ+Rupcy+bctH19SkIqAsopyPk++iDHUpFRQaBsr2A9AdROoSI045g==","shasum":"fd10a097f736b9132f6bff73c58518948b882aec","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.f748ff2f.0.tgz","fileCount":16,"unpackedSize":288298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowj2CRA9TVsSAnZWagAAEuIP/16tXFRv5zXWtSGlzXfC\nVuLKVOXet3TmKQn9plaFF27aeRlWDpgG8675tY0Tfg+ZTbUfiAs8d1ljpp7D\nOjFVNhzXb9/pTJCX3733PPCBjaf5LXr/6o/xbwV4L5BckE8ux4sFoEkebC4w\nSuXJp8ALjdbOUGU6+BaLOemDd6ltkqv2dUO3p2RE9Ke/5CJeniH/6fwcNcTD\nQi/WMKvq3YHkSbEG6fnx3sx8QIc2KU/orxTBRtk5wrDjCKv9DO4cnIIQLOl7\nqF37HK97I3kiMg1XwPQgdY7iCCf3+DsXhrUnphW3U8fVi7G0OMU3rN+gs0Rc\nni4ZBvfREeuzvXzyWw2mP+3poRqtK+E4OR8vk5LTsFikI6yCyRF2dcA/YwjC\nOkhIQcll+FSwtz63d1y9jmSrwbo4b9py4ftrjdzQ7Vj/Y9bJVofm80jVPDK9\nULGbxJ++gNCiLkre6Y3z1bwqQMeTRO1TDzHEjQQZ4lasxk+o+hBsiOJgorcC\nG2nXdyJSNxUxaTL83d8y1oPAAaATL6WOCddDM02rS9OBpi3D8xcdd1awGHWf\nwbTWWtDXXkbdnGStWn6hqv2ULQEAK0rmHzWFg88edW3Y85rZZR7gZX3bcDzb\n95Sibx2t5tGA6KGo+LYaRzE/z2kHHM6sJeZHxeyzki9DIL7uogFj9+UhdKpG\nbC+F\r\n=mwsb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+B2pDhfnxRTbtwcWUdpW/7Bj8GfKKdV2x/LVVK+AHGAiAK71PMY2Jybr3KTfp0HYdlb+GAOZ5O2T7MIv3cb3ljbQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.f748ff2f.0_1621297398445_0.8882686073447561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-select","version":"0.22.0-canary.cc04657a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/floating-label":"=12.0.0-canary.1a8d06483.0","@material/line-ripple":"=12.0.0-canary.1a8d06483.0","@material/list":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-floating-label":"0.22.0-canary.cc04657a.0","@material/mwc-icon":"0.22.0-canary.cc04657a.0","@material/mwc-line-ripple":"0.22.0-canary.cc04657a.0","@material/mwc-list":"0.22.0-canary.cc04657a.0","@material/mwc-menu":"0.22.0-canary.cc04657a.0","@material/mwc-notched-outline":"0.22.0-canary.cc04657a.0","@material/select":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hmnVHxEUXQezOYfkBuguv0PrG8/z1inyJkSC+j2WvWF1YAUECayp729I1fh8r3n3uiR/ACd/Ha8IfTsyFQkSIA==","shasum":"805d066f222f64fd414dcc70ad95982c2c8865d3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.cc04657a.0.tgz","fileCount":13,"unpackedSize":203839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxamCRA9TVsSAnZWagAA+hYP/A1PtLMNk9yz+8b1nJJ8\nq06++3yHcLlFZEB3T5p9pEOApwxpRZZucW4kN+Xv4noYrBS7TYOQ8JfgsV4H\nue6ynMCeE0HdsNQXIYCY8mUx5vT0o4ieVi7qdLrtvmVJxTKEEFMyM7tBXrkN\nl1XKaI1XzMBtepslLY5a2y+PMPN2tKknpk32mbU+uSvPuMhKxOmjLwivKMfy\nblism2QdXaSDcme/CGwTQJpJ+nf7ORAY8sWpq5CodyNw7MN7LVrLkMhLCEz0\nyn0thcSEvwfGOkvkI9jtwYtvAVt2Slx/ppDoFx9DwH9d+rO60uSf7CIOZ4p2\nMPtPVzDtcLhPulEQydeenIVDG1sGMYCtiqEEucHZCky4JlJs9v5DzyjBpKKg\nkGaaxuJKYsmGDZtljd26YE/oIP97WPO8Y2mk8eISdV2oRWcd3Oh0oXYFTODs\n0PIy6IK+5yVMl2q4OCWXIXhIu6t8Tri7mVFqXZoKZC/3BBFg8SY7Tj6uHyZI\nNHkMGo2bRABMKDALvELPCiobsPK6JgI5RLxJj/Lk6jf/oZY84NcMMV+CnkcW\nakN13Xkzc5lrA/Cm2WQvafl11e703k1gvPTIRcOIIHn3FAvGlmID9iYNChyV\nhMtfPsp/Ga+klYDur5zyI7Uy28ng9K4yU7mGY/XZrnBfUaToqM3bNSRUtu73\n6Bnd\r\n=vtwo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh8kXjWCyiVKiZ4rSF5A512RmsMqAWpEcF1wGyEqLv2gIhAOmhVqeVdiDVSgcIh9wxQ6lpa6g2UBjDXT1ee/Qu2pus"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.cc04657a.0_1621300901944_0.11931872954592815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-select","version":"0.22.0-canary.3a3114fa.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/floating-label":"=12.0.0-canary.4bb5eea2b.0","@material/line-ripple":"=12.0.0-canary.4bb5eea2b.0","@material/list":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-floating-label":"0.22.0-canary.3a3114fa.0","@material/mwc-icon":"0.22.0-canary.3a3114fa.0","@material/mwc-line-ripple":"0.22.0-canary.3a3114fa.0","@material/mwc-list":"0.22.0-canary.3a3114fa.0","@material/mwc-menu":"0.22.0-canary.3a3114fa.0","@material/mwc-notched-outline":"0.22.0-canary.3a3114fa.0","@material/select":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1LUxOOFqR3gzp7H5JbOGwsa5rAVAK3MMCF68y8eRlKyQQ67hyt2I9abJZXlB04uIGCwj2K+oTKqzTu0tC65U3Q==","shasum":"d7bbefb9a70928595367c0b5a1feee7c948a2703","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.3a3114fa.0.tgz","fileCount":13,"unpackedSize":203839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaIMCRA9TVsSAnZWagAA7yEP/1sSwQ3wUpQhA0bEANZ+\ny/hvL+rwEhcWPolR81kSqxXZS0j/OOnvri66MsD6CaO/VVdGMmZ9kDTGevB6\niOblfMbvEepPZJNamTVCRazr/1rOQVMUmvFqyfpJAuyK0Zh3KDWOduWcL9Mu\nbpko7n5WGsuu2CXz/Qibx3XNDXP/Ns40sYkLMRLtlHMkbAV5wVs5YIlCiKmV\niF3O8Ijta02ug7HhSFPjXAqVyP0/X4CHCgkCP5MbDPYW1mJocQ6TgJIWhvw0\nsbdjPVlPsqZiEhtFvnwAErR3p14QBsLkg+zbma+Q0lXqkR/xelYwU/3yY/Xo\nsiuh2CKg+H+sArBwc8yw5ZAzpZ9CmoLhvNt6XIVxb6UtyEl2D147Y/jlug/S\ntrBMTLyU6SYmNikzLw5WjocgKbr5dat7ldNd2l63fH0QejvDi3OvPAsdiNQI\nvauna3BcEoHJOgp2emNf6TgXVNd0pywgeHvHuk7/nzZjqQeavoOZby0NVios\nCKPmdQSiijFioSL8odxk1rVoKQDYdM0j0RRW3AIpyxk3a9BtqaN+7fV/iP9y\ncnmct28/aOQUcVwdsmXw2gvsXlD5X7UefV7dpMAL0YYb+Vlld1yK1PGqE2I0\nYq3R27knBb8tibfzp1BX5xpeeXWAnQF0m1/56SHtpTnC7kW5N7hzOFmoPAK4\nRdRM\r\n=Kb6c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYKVII994dKa46UbgSm+XOJnWvozb4Onu1zEKAJmAkuAiB/7rxA1rjbSyUb08J+i4u7NdH3jfFc3hPqy4iXNoJm4A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.3a3114fa.0_1621467660281_0.09254661599945702"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-select","version":"0.22.0-canary.b46bdf83.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/floating-label":"=12.0.0-canary.4bb5eea2b.0","@material/line-ripple":"=12.0.0-canary.4bb5eea2b.0","@material/list":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-floating-label":"0.22.0-canary.b46bdf83.0","@material/mwc-icon":"0.22.0-canary.b46bdf83.0","@material/mwc-line-ripple":"0.22.0-canary.b46bdf83.0","@material/mwc-list":"0.22.0-canary.b46bdf83.0","@material/mwc-menu":"0.22.0-canary.b46bdf83.0","@material/mwc-notched-outline":"0.22.0-canary.b46bdf83.0","@material/select":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+s6cciKW4Frvc+oSxzPPkY44LEflB8PW3OynTqsLkaYEX6xo9vn1JqufFrg67kBH/0TT0Su2t6lkLaY0P8Ostw==","shasum":"65ca5f3a69461b60cf66d1e010552513aee74d93","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.b46bdf83.0.tgz","fileCount":13,"unpackedSize":203839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcC0CRA9TVsSAnZWagAAWXYP/RBYDu4tRGMJ/EX+Y9oI\n/NWuK5+HsEhICl3AbWUHuoHh/CJDlTbaIhjQbyK5Agmw8ZdSQqKZDFNC/DEq\nNI8szC5Cv55m2yU62tDIVBXmKb2eWcOLDG8xnNZg4k+MWDeo7WH3yXsAj3Ea\ncuF4TG0eo87si8LOKdgL309PZ56X6MxEctt6tIHM1UtGx1WIQPx0B82XvU4e\nSxZuHna7OOKmpyIoxnK9KYbU6Ir/c0vTjVcDLjrD5+Bw3x3fw7UDkoUusa/k\nOsulKKQE2xRY1zAmrcOoqLY5RscDMLm11Qo8hGI/EHwqpUzCjBdZDGNSkK9c\nSbrU/86S+uCcaMk0qXJ049o0hG1C/d+7G26Z4rI4XosemCuMEm6/TTydwVz/\nKyDLsFY4mD7yvDU/ANWzLeIS1sxuSdN7K0RfTjQ9mVHU2SnZPYWRGwScVr9q\nWW/r/5vdKDixsHifs4kQ5I/XwaX3HNMU47IDlZLVCyyOkar8KrjVZiTXWCqB\nKuA2QKQ2btuei1/qWVXfzRYGTwC7NTXiYcWqWmUIOWKEuu/mNGew1MQa1rAt\niApor9FVAp3sJEsSh0zQ0yjp2OcIm125QQfVY59EbFbArzQiy4VftKXRBSyC\nZ2SNBkwMZTaW0O/DY13m68xLo1d9IuMhTKbTGnZJ3lsWceaINuSaoN/rnTdp\nld8Y\r\n=P3dA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt85ZgHYIRrM9kVuZgmTl6Vem2e2El+w39B23JCFvSeAIhANsWJiFrOfY9nOyOI1nT5Kulqm5vDXVC12Ohr+vm5RI4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.b46bdf83.0_1621475508299_0.26872007149134114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-select","version":"0.22.0-canary.012c8dc0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/floating-label":"=12.0.0-canary.4bb5eea2b.0","@material/line-ripple":"=12.0.0-canary.4bb5eea2b.0","@material/list":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-floating-label":"0.22.0-canary.012c8dc0.0","@material/mwc-icon":"0.22.0-canary.012c8dc0.0","@material/mwc-line-ripple":"0.22.0-canary.012c8dc0.0","@material/mwc-list":"0.22.0-canary.012c8dc0.0","@material/mwc-menu":"0.22.0-canary.012c8dc0.0","@material/mwc-notched-outline":"0.22.0-canary.012c8dc0.0","@material/select":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8XRc8nfEB0ye1HOVg2/3h4HgkFy+FQTnD2W0a1M86m/eFHox5xUKNr+rti0tu2vMq/miBrI7EQfWvzieDPtfmA==","shasum":"5ed4e40472bbe4d9d417050052c292660a96b47c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.012c8dc0.0.tgz","fileCount":13,"unpackedSize":203839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE2ICRA9TVsSAnZWagAAoe8P/3VZltAGCRM7Abr9AtnT\nFvDIEfOPc7fhZTvCRKTCmzcFfSV//tPYzZiwxE/zgBqsCSCg5E+XO/rUL9mx\nrdv5GBJdUYA23Peqe+4Zjuel3+7e0+p2pwA44/s4APGnuDsa+viVXiYMhmbA\naORh1FKjc5aIeuKWXetTU8wUEXE7dMYGohmcqqGihoX7fbHWZVcQUy4xl5v6\nZl3oSfK0eQB2H1qgLun8lHNz8EW9D5woTEyJE3KzvJTA0xTykjPRDAVNvXXQ\n7tJwzFTfVnb+Orz+WBCFZ4m3fsxD6hhTX2iIP7yCWIt3rIEhl2tYwSgUcd1t\n1OYBuPYfJwx8uOVCkXwXH9viTgr1pOMMmF4n5bcRsSIq7EkBZhzyMM+HK5yr\nLsZwYZf1a81h5tKKP/y+E1bozPhiqD2gLv8vSsRK0bi65vWvJ69oyc6r6eAv\ndU8APCzSO5lDxI8g0rOZ9Sx3Tfc5Erf2hZsbIZA7DxY65oVr/EhXBl1ZpdpZ\nTY7yIyIu3OVjXRtGSb7gZ/67iBlHprX2ZXm4FnZvCWD+DbF/RGiR0vSqAU/I\nBS/kZgZs3+4kKq1QwEdCddcMeo6JAliYuk+qGUBmgx9sbUkSmXGtklLp9QV9\nS631WEqnZONqG5w+LDH95oOBu1L6WC6gJoMfluLq7TTlX2stk96RO8LOhDsP\nL07d\r\n=oq7p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQg1ZvD2jeAWC7hAJVLAga5ytRbYF/L2o+T17o9Bcw+wIgMaFyboqqque/+sZiLF5tzikmjdRklSvn0KQBTNFzWe0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.012c8dc0.0_1621642632034_0.2448685622704303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-select","version":"0.22.0-canary.e01a1731.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/floating-label":"=12.0.0-canary.4bb5eea2b.0","@material/line-ripple":"=12.0.0-canary.4bb5eea2b.0","@material/list":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-floating-label":"0.22.0-canary.e01a1731.0","@material/mwc-icon":"0.22.0-canary.e01a1731.0","@material/mwc-line-ripple":"0.22.0-canary.e01a1731.0","@material/mwc-list":"0.22.0-canary.e01a1731.0","@material/mwc-menu":"0.22.0-canary.e01a1731.0","@material/mwc-notched-outline":"0.22.0-canary.e01a1731.0","@material/select":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R5QW8E2usLEzeIrsI38Rc7KZ3HdKTJHT+PJ6n+b3+SEMqWWgev6vvXHDd+hPqNS2fALVASGd13KezjxvXHYnmg==","shasum":"064cca655d0214226fb5d121900cd113e162d3e4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.e01a1731.0.tgz","fileCount":13,"unpackedSize":203839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq85ZCRA9TVsSAnZWagAAgZ8QAIkFsGosJBzGsPn5WPEi\n0f+lvq+QpeO0TzcK3yzVCSx2jcct4G94hg+mGrTlSTfeIqLTRFYeZ6hmfN+1\nkVTJriZOHRnoAVfVlUZRMkrxfXPVLfjBblUF2OyAoiolP8pHmoxY8BaehLAe\nyzhrHRSP6ozirHETe1OZdIIFKPgEE05dAFpBz1rZ/4tRmXYVlUNgEY5nWECe\n9+dCou3oUzlpk3fqgmbHZqqkSoRpZT+PHstY1Nd6OoiEv3x9MGjdwmEgpXrT\n88KPz5DxPwHCaSz5CFo67UNkVqm7x2mAhhF7lbJx1fJ6rq13aquXIwZpS5NO\ng/eGxhqj172AhtFOoWF+Osg5ddM21Q5LX6dQTPIaK+qVZMVelqxWDR4ygo6T\nPcPfxpeToHSd3/uajQxkg/Ba6Py9eFgVyeVVNT/adaHi4+rnDla1jKZ+HyyP\njVrPAKSkNRZ+7CkziYMNQ+Ay9F9VJoM9XZ9kHyv6PCe0UZLKi/xVrvJBMzIP\nOPZ7PKPBS6wrHTJxJNPT9eMR9Wl4YeijvSbz1W/4ZN2nOTmpvFy0aYHimuTV\ngheNpRWw6nrSCxZ5KqsyvKIZUnxQCgLvNvdS7CQC3Ran/Ehpxub/mfaD5uD+\nI6eHvCimMuYJWGYkj0+FPZY/1WGAgyMWcqVKWOgpuF4rEoPF3wQJ6hTx85Bq\n971e\r\n=RAQG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuK5Z7w5VrTkqXRoxP99jaP4TSzyT5rIlcQGWF4NJ/GgIhAO0P+NSqC4F5YUd2+kaDSFlZoL7fPMFb0DT82EngMI/+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.e01a1731.0_1621872216990_0.1688617152507339"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-select","version":"0.22.0-canary.59174b9f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/floating-label":"=12.0.0-canary.4bb5eea2b.0","@material/line-ripple":"=12.0.0-canary.4bb5eea2b.0","@material/list":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-floating-label":"0.22.0-canary.59174b9f.0","@material/mwc-icon":"0.22.0-canary.59174b9f.0","@material/mwc-line-ripple":"0.22.0-canary.59174b9f.0","@material/mwc-list":"0.22.0-canary.59174b9f.0","@material/mwc-menu":"0.22.0-canary.59174b9f.0","@material/mwc-notched-outline":"0.22.0-canary.59174b9f.0","@material/select":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PL4uL01Q3tvi4+Ybl773oVCp3MZnXEFLGCf05ITGMPhitK2TEhTuMA8qmmyWbRPue/jGQbzwfxBLAFFBCRKz4w==","shasum":"48d3fa89dfd30a97e7e4ed6190eb8a5b818d5763","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.59174b9f.0.tgz","fileCount":13,"unpackedSize":203839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTvaCRA9TVsSAnZWagAA5R4P/jJPhHgHtMZvd6rU30r9\nSYKViWleI6yDO31Iejhd5EVVAxe0P51SKNiV04TnXplGz5MClJ3qw7fP2ZoF\nmD8NeThEGHiD3OKptIqsiEPQ8r2EjvefiVPUmvvuBubJc5V3Kke+nRKTlKzT\nc7mG0FC4RPo4bPdWR/pRNWDjZfs2dhT+7yE3VqmGnQMfFuZKfltan47twTEY\nhpDh3xyIngTZfqTRM5KOznfYN4grsOgLxfSi6mwlRHi4WkiZ2c2j9ZfIZEnW\nNdogDouMF8wWAVBpxU/441sxnE1HUjgxGvb3Fq62CGNOtUZ5qkxlPjPv7RfJ\nNxZoYjERMgaZGWTG25FRpl01V1AMDXr2x4WBGfCtjDYwVhwUFY/dLT20CmVP\nFwbvER681fARjwdFaMuQ3bxFrT+ir9Dod0co7rkwhByk+20g6KaS3oeEdaXG\nj9mrHZDs1t9YFGM8LpV/OWQKhKIuzhBjSgiC1LBfh1g4LDtA4E02Eu27xksk\nw5aczZPUFb6DY8oInKiACQ3QeXf0JQbl4r+il/0ad5uR/AH+L2jq0R3mlevp\nPwDUQ7UesTjnSCJ4Sudoc9F10LvacAANNNIFcCzlVB7nFXqc1kqBJNtsntJc\nhrYVzs1jDZDKwG2pWiRJbSoX2H4Xx/T+p5gSv5nVE1PdDrq0830L0soGW3g/\nzm//\r\n=gFfK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl2q/y2b8DFvlGIl1tiBV1QSbamRKcPG5yKZTqgyCP6wIgHpMSl7nRr2km2y9kMHFmMPdLtFlhQUG12As/TMvg6LU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.59174b9f.0_1621965785886_0.20270473588962168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-select","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/floating-label":"=12.0.0-canary.4bb5eea2b.0","@material/line-ripple":"=12.0.0-canary.4bb5eea2b.0","@material/list":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-floating-label":"0.22.0-canary.c96cb2e0.0","@material/mwc-icon":"0.22.0-canary.c96cb2e0.0","@material/mwc-line-ripple":"0.22.0-canary.c96cb2e0.0","@material/mwc-list":"0.22.0-canary.c96cb2e0.0","@material/mwc-menu":"0.22.0-canary.c96cb2e0.0","@material/mwc-notched-outline":"0.22.0-canary.c96cb2e0.0","@material/select":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UJdeJkPQ+r+HqIkkKGQv86hEuKt4ku+mDd5tP/zheBIftbYFeRv8Cifawuuem+e3T8nykItw0nnRtbxZWY0wxg==","shasum":"890578d3b35279d7be318383bf3a939cf57d2168","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.c96cb2e0.0.tgz","fileCount":13,"unpackedSize":203839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUxDCRA9TVsSAnZWagAAK/EP/0lOZtlhZaHR2/CNxsuu\nPdtaBO2L3ST2hwHZD+U4e+UfE7oAD5ttFeWVKZb2Ie/1HQt5p9Qv7c9laf0Z\ndODfDCJHjAkh30qP3s3Rv+mpr8kAMpS68ptytzHSrJyV8z3CJHA1IpWmj7WM\n5SuXkQ2AKydAJK5YAz4qecpoDc0QqW1QYWfDWkGU5s6MeqV+G2ZACqUhLtm3\nVHlzXm9e9Y8lSLeQikBhz48ogo5/DWCyxBKHFqPGhieOBJEC4BsnVpoXARGM\nimKveDjLBKSr0pCAU6nHIOg7U7POg5ZBbFtHomc9hJctocdkqCEzIEuIvw7b\nb9aTBjbzjDcTZnmDW0CN5gIEdg79kRnxzEVrQ0so/tAHYthLiYKS3KwROgxR\ncXJcjgJJVTBHgm73sPtTjs9LrSkI3MKS/CSh/iuiJkg52onmOOKFuTLq4mQ/\n/S7Go7Wdrot9atrZtAFH2UCiXeyVHKVInrSt8syEa+IQ4ArniI8Mfi+VHE3l\nQINOq1HohKwBzZtSXhEiq+Tcy8iqW3ADCto1l0hlPTDy+Jvhf8heiDV4tR2W\nSTnmVX4zH737qSdGE8k0TBwHef19E03PnL0IaJJ3HEmEJeAskskNC8R9yVzp\nFX/0Ex3Xa/jJLhpR7lV4xSiCiY91IvjWtSHeiF15rkEABvKgueKiYONqZGhe\naRcV\r\n=+e88\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfUBAu7akJ/R9/30cTO4zUSk/I/UcAEg9xgkiT6Ho1hQIgeByBn+LmSbzFceX0x73N3wuPTdJfVw/vqNOpFnoqfQU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.c96cb2e0.0_1621969987485_0.2960054365271958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-select","version":"0.22.0-canary.b9b0e330.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/floating-label":"=12.0.0-canary.4bb5eea2b.0","@material/line-ripple":"=12.0.0-canary.4bb5eea2b.0","@material/list":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-floating-label":"0.22.0-canary.b9b0e330.0","@material/mwc-icon":"0.22.0-canary.b9b0e330.0","@material/mwc-line-ripple":"0.22.0-canary.b9b0e330.0","@material/mwc-list":"0.22.0-canary.b9b0e330.0","@material/mwc-menu":"0.22.0-canary.b9b0e330.0","@material/mwc-notched-outline":"0.22.0-canary.b9b0e330.0","@material/select":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UfMjVM/YPk+4t1nqqJs4XDC0SwBACKmToDSnkfa0xcj+UfZngCB7YlnJohn1tz9/KE/UZTTlDV+L7I6O7FFa/A==","shasum":"4235afc8dd59183b623aa7087156359b1d580145","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.b9b0e330.0.tgz","fileCount":13,"unpackedSize":203839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWWYCRA9TVsSAnZWagAAs+4P/j9ntaZM1JeS+9BBo/SB\nfWCGYyiv0XAXuD0yTJMYwN6oqy9do8q9eSVIOETGPD1WYmd3LUnf9l8ZaRaq\nOzhn87RyRE6w7aDCfAYL30glPos1WdMVOijS1iExqSKwO0fDv1aGs6uOlxV3\nHcuVEyFvX+7vPdqYXDUEiste04F1Mei/V/jSzQbpsdOs4BoO4/H3tR9hGHrv\nIxxxLy8jtNeYmD0ncsPduuFgR0iVKZahCweAtd8Ty+FhAdrKx/Gvald7RMZh\nKmHzNYAE5CS8NG4kE5oK+Zy+ikS8wsdG7bZnMxC+bRtTcAXuHxzVB95Qwlyh\nOtNNu3nWPL5kwuWFolEQNSTKqggv0HZmsIW51ObX+ldilpZbaRuTUNSydC4z\nJHQRmQhMVTBJX0Xhtn5i3p+Y5Ifv9BI/8zozI/qbJ7r0Pe2Sa3jXsjig3O6h\nG7Q70FXxgA5PDazvvs1nMk7QVNdDXd5gnMA4wn7j6H9IwzEOZOfOrLUaiq/E\n7j7pKzOa7by0y2Dr9109vg2M63z8jcz7M+8NMCT6ke2+00mZCqik+gcXI5Bb\n0I6uVTlrjdmNYjX4uKSApmw6v58xL8n9qdxVjfJ4uv2taioUD2kXq8dRWPxr\nGKAXE5miRvm4fbQEeDGbAfX1Duz41oGB6GLN8rOSl9XyiP1N72FZUVuy51nJ\nf51B\r\n=gm1J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcWjun5b9M0RfOltTusWeQC0+EsJ42bF2D4ZPhYPwPbgIhAO+F/35zVbkW+gyy/SsthKFmsWz0c/h3FYKMr7NqwtSc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.b9b0e330.0_1621976472213_0.23645024705126727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-select","version":"0.22.0-canary.ea2a8063.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/floating-label":"=12.0.0-canary.4bb5eea2b.0","@material/line-ripple":"=12.0.0-canary.4bb5eea2b.0","@material/list":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-floating-label":"0.22.0-canary.ea2a8063.0","@material/mwc-icon":"0.22.0-canary.ea2a8063.0","@material/mwc-line-ripple":"0.22.0-canary.ea2a8063.0","@material/mwc-list":"0.22.0-canary.ea2a8063.0","@material/mwc-menu":"0.22.0-canary.ea2a8063.0","@material/mwc-notched-outline":"0.22.0-canary.ea2a8063.0","@material/select":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h3mRfB4LQD8+jP5jHSmgJDOT9DmSJYCjqbtT3AqOdfbpVcDn1uglO9gBPDOZIc5Ds+L9gsbCgnHCy0QVTCsN3g==","shasum":"45182b66f81720492888e15f5fd17701ec5a76c4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.ea2a8063.0.tgz","fileCount":13,"unpackedSize":203855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWbLCRA9TVsSAnZWagAA4vkP/0ueoI/Ln0u4LmpyRaXD\n4UWnCqUq+3+QfNeRTCclhrXmAZLaVFBSJyaoc7zgiRxwgDbN1q0I/j5KjZmf\nIOQ6i3JctRKpcEvujjXaQuviNXykdWL48X3DI5BxMf7syS8rNSKKOR9gZLuO\n6hnse2YuXGOmr1MxWKJmLO8tvWrHC4jW8q/JONhVYhzx6Yss7unJAw0oNZ6B\nM6DLY7cquxMbd8Gjn9psRSe8kB9bIaZlaYoM3GfXpv27RAa8DtnJ6HsG+lic\nOAXHM72F3NyuUkPfGuPegzjX1OV+S2gcAtkPi+GxYFVmfVnqT0Ruo37DpdHd\ngePab6GOYXWXtpUXdfb0BrFM0YwiZsdYVvw7k3JEJAZJkNIbAEBJtReFb5Ov\n/rR8YnjtBUkxLy7HRrr7BCGH1ePffhBoICnJeE1Fg6LbF5ib2+GRDOvapeek\n7Mquq0xWuJjXKK2n7/k/SJG9XONVW2gG56VoNiT5BOxrquesxNLTp2a+l2k8\nsyNj69fjzQazP5mveSsXPrk6QkGX9YUZaGg5ARDep0+LliuRKUBkYY7ZHUj5\nbReySwNk0515CupjyBaQjShxD+FAauvwZUNB4kUvu8NQlp0fnAZyzKh8ruCv\nt0pRPsRUeER2B5UuqcwEpFcKueYFtr9ydd4RG8XjGXp8DDjcZsZASDztwqk6\ntBM3\r\n=nrv9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpAi1QlyMXgzULDyKmi2/nK0/Jef5Sf4xNj0KHaM1clAIhAMQXff4IS0U14bOgMfsX7fzA8UB/Pszpc0dx/3BpngpY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.ea2a8063.0_1621976778596_0.8490301837706253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-select","version":"0.22.0-canary.60cd9178.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.fadab3372.0","@material/floating-label":"=12.0.0-canary.fadab3372.0","@material/line-ripple":"=12.0.0-canary.fadab3372.0","@material/list":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-floating-label":"0.22.0-canary.60cd9178.0","@material/mwc-icon":"0.22.0-canary.60cd9178.0","@material/mwc-line-ripple":"0.22.0-canary.60cd9178.0","@material/mwc-list":"0.22.0-canary.60cd9178.0","@material/mwc-menu":"0.22.0-canary.60cd9178.0","@material/mwc-notched-outline":"0.22.0-canary.60cd9178.0","@material/select":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8qqDAB9Y1kb7jzOPYQr0hes8rySotADu0W5QTxFY/65f+Jx2G39/XeEA0ICoIxJv6V2VIiTnyvdMm1aqhIRd8g==","shasum":"4b5e5e6a242a930fe9389165e9c59e6622e2f5b3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.60cd9178.0.tgz","fileCount":13,"unpackedSize":203855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTqCRA9TVsSAnZWagAAhSYP/0UIHf4offCbN9EMKM+7\n9H4y3PZTzY7TZH0VwTzCd0N3iE/GLlRZkyjNQHfL7ioJx8VN8KdWgJKgs6+2\n2vUhWZgyq2Y455P37OL9Cs6EHGBql4YnoHhWSuQsA/4qt1BY0o3hZ7fxPsSB\nm+MxZrTwhgt7VQHoJX/RzpMLsZJOginvbZD9SrFL2e9I5FILdP0tjdLaBId4\ntlUMCYCTb/0Y/26CrU9v/ovB0fCorCUpyZ/CwBLKeOIiF6mpSmNohbB2ugbk\n17S77aTsCN/G/of2a11pvbi7bIxzuLfgoubOxZq7UWxm6HQFOmcGkvD9liZW\nLDc7/dLcCi2JVmx/wAQWyZKeu0f+RnWwJpROQnXYozr96K5/lKr+sNHN1aWS\naMF/wo6909M40eAdELx0AHN9+k/C/40eK0R3sonkX3JHta8N2JIyH6XjvzTJ\nPizFGwAQQS2iEtaPGRNzh/uK684TJTa/NLE3zMLgfO3AkbrY6GKbYzRiK5wC\n0aT0oPzuAT18aI0fp3XtUWmzEaAHe4iW1dwQwMrbyvTWKm5VrpXapEPvIDv9\nPPZt3QmEtA4LUuF0zkKq8jSWOY8asPv0BtdAGLjFmR7cB+GgkTJK7kRNqd8E\n3i3DMkNHdeu9qp8xqfC8RALFKuFNDKJf8p1G7RFoxiARXRfzLvJaiCBGjDeL\naqLU\r\n=P+lq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEejrvRkoA1XXnHbJ36D7h27hyxpfO0fxL+tRdPq37oKAiEA9xBtrmZeMULgO39z/bFRvrTod4N6kxRe+TazLQhQPWc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.60cd9178.0_1621984489672_0.5332693270078492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-select","version":"0.22.0-canary.b99c77d5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/floating-label":"=12.0.0-canary.ec31ae1ed.0","@material/line-ripple":"=12.0.0-canary.ec31ae1ed.0","@material/list":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-floating-label":"0.22.0-canary.b99c77d5.0","@material/mwc-icon":"0.22.0-canary.b99c77d5.0","@material/mwc-line-ripple":"0.22.0-canary.b99c77d5.0","@material/mwc-list":"0.22.0-canary.b99c77d5.0","@material/mwc-menu":"0.22.0-canary.b99c77d5.0","@material/mwc-notched-outline":"0.22.0-canary.b99c77d5.0","@material/select":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GUGsI23/7JOlMOcm9408g16mFsxfU4ZwUtWx0c04kxB3B2MOcFL/RVnLBBdoYs1ANPqJqS6d1aOym2tNmjJTUA==","shasum":"e4f03ce3d559c0b766a1630a11943a47fbfc2c61","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.b99c77d5.0.tgz","fileCount":13,"unpackedSize":203855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3+CRA9TVsSAnZWagAAdJIQAKJhA+u5VYxvrleKEaLc\nNexWQOUgL9xxGX66q/2I0CkCU4Tf4cHmQWpRneehL6jWx/oJIKeFflehNtGe\nsMvf8J7V4hMM4jYEfVwUzOEZemnyaWEdzdmaIeXy6AtQSfByIIJUsM3QiSjR\nGCpklHOxO7g819tGiIIrMs2PJFkZUVy/yLd1FbY0AcjALYAbs6ZE7G1/xd1P\nmmr5Hf0L2KgfIc9LNVy41CdTroccN2tVqTQ0fDSnym6aj/gD/s9ONdPW7+0d\nMc5X45tt8WV+v7/Xnx96HvZ85KHqHgMRjJ96Dh/nLsg6/FbemTP15NEjsidi\nyPZAdW0JYd87t2TGwr9wWpC8+vpQC3emqomZwglydoNJDQfAqYPm6aP3zppR\nz2WQxIiaznW4SN+CkFb9BVx1go6P12OCoyod3YkFXkyIUbnVAsZ3WeuoWW/X\nKAbmteqw4WQdYwEKjcobupV/tiQYwRxlhFq1C/X5HtrZf9uJ0/Mmrg5w689V\n44r1FZ7kwkv2rdIDB84mejbvUHjZGyR8YKUSK0XNz5kBf45BP+PtwG74k7pA\nwo2+2C/0MFNeqgiNkiFeZnAgxx187+Nrb61X0qYeTH/gu+3w/h8bxvFJu+0J\nZXtHPLDiqfJkesA4b+MB2kHQi7di5Uv5i/eoWpSew+s95BH0StPktLlOhpg4\nQ8h4\r\n=PmRk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLbCSaUY+tuL18QgjxnLpHVxPfdec1VWHf6vBRTsY5IwIhAPZqSc6r2zAnWlGvUofHL7OGOC1yvUAW7QY7nlzNphax"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.b99c77d5.0_1622056446247_0.3698068123427851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-select","version":"0.22.0-canary.0de82c12.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/floating-label":"=12.0.0-canary.ec31ae1ed.0","@material/line-ripple":"=12.0.0-canary.ec31ae1ed.0","@material/list":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-floating-label":"0.22.0-canary.0de82c12.0","@material/mwc-icon":"0.22.0-canary.0de82c12.0","@material/mwc-line-ripple":"0.22.0-canary.0de82c12.0","@material/mwc-list":"0.22.0-canary.0de82c12.0","@material/mwc-menu":"0.22.0-canary.0de82c12.0","@material/mwc-notched-outline":"0.22.0-canary.0de82c12.0","@material/select":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NEJwERocXUA8hClNiI9dh27TpT5OFj9495xJ7qHHgweyPyx9XcepdeWUUgwX/M4KfdRECVLb9Coqicog8R99sw==","shasum":"59eba996fdbeb34de4251b959446ae07904ad65f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.0de82c12.0.tgz","fileCount":13,"unpackedSize":203855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr5MCRA9TVsSAnZWagAAKVsP/RUJlfFdTzuFWrjHTreQ\nS/Gnw1cnsSGN+PqK/GiDB+y5Gpsv/75JavNvEe6jFDMAH+d7mvDE3ybX04JB\n+ZKkOlNofu3H25fkGdp08X09WNvh1QEzZwC5WfzLaKjn5BJNBk4Z8G1I79Q7\n0CyC8KHmpVMoNxCr9ozcxlrhSk4JjF0MEEpnJ08L7ptC3cd9GmXQpZN7uGsa\nor9lzQ7mkCKF9+GXynrNc+QzfhQsBI1MSO8fUJ1dYtMWt2PHdRc8ZhQP6gbH\nOfvJCKXPtoGYv3o2WXVjmOdLcH5/GQJqqXrL5BSrRaCizjY20f/7t5mGWxMR\nWj6GU3v/OvYjGqP0tR6Ajx1OghmAlrdeRUuCZ3sKAa81kMhInXWd/VnLe9K3\nK2H9YEJ2Qwgh5t090ZToIPNSKrmGLKyYriyQ2awIuCp8SE9u184YgboQ9u/W\nqZYr/uJAyb0vi8WUoM4HHA5PEsuqFRPWHp0MwSa3cuETu36SozwfTJH0d49A\nUNM4yWXBsQQzonFKmRQYKlaVccOJrI4iDna8tkfLvFKLdinUQe1lSQEL7XmA\ntgpJrlidR7GtVjhbgh+rXcp8gQU65bWw7H1IJCf9xo7rPwP4khrOAVwA5oAS\n397MMwQpC4u/FkxxyJ4UQwQlsqK/4Qkb+sB1zT+bkDCZWOmmtA4T0xc/eotJ\n1T/m\r\n=/Bml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbdfiPNCTgVOpfn4I0nN73tcaojl692BUN9XdGnM0TvAiEA7hR7RO1aC/CFKfDz8xokduIWv0YxGhYaCTTxLUeCOR4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.0de82c12.0_1622064716121_0.9733067285074546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-select","version":"0.22.0-canary.227a4614.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/floating-label":"=12.0.0-canary.ec31ae1ed.0","@material/line-ripple":"=12.0.0-canary.ec31ae1ed.0","@material/list":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-floating-label":"0.22.0-canary.227a4614.0","@material/mwc-icon":"0.22.0-canary.227a4614.0","@material/mwc-line-ripple":"0.22.0-canary.227a4614.0","@material/mwc-list":"0.22.0-canary.227a4614.0","@material/mwc-menu":"0.22.0-canary.227a4614.0","@material/mwc-notched-outline":"0.22.0-canary.227a4614.0","@material/select":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HFO6WVo82ntfy45FD56201trkS2Jyaz7TWfSWLkeigTvSszy+13ZzgPtwhz6H2thn3S9YdtI8GZlfu8QCM9qmg==","shasum":"30acda6d74abf58bca6d90bf47b8b7b96f37861c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.227a4614.0.tgz","fileCount":13,"unpackedSize":203855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8L4CRA9TVsSAnZWagAAC+kP/1/jPRSkmZ/UiJ/UfWhv\nQ/4rlzWRSdxH8mWUUZtx5bUQ0t4F08/KNrxHM9BPSjVLrRO5GsXJwFTW7QmX\nWsg4esmQ9Ks4SmIoyWlAo5EO2RliUHt4sFvjoEyYmDF//Qsh65qH96sy/mlu\nS3T0VgM8wE7bWYSA1pQxqlzmN/KQlbA7EY8lIolJhFbM++E/bCwokkt3k0sw\nZ7zsm3QlZ3YzjDtvHQuzG3UlWt9ProK6EV1Vq6rAO8fiE+RpqLx/qyU5Gheh\nFpHgD+wo82ItdUEpP8OqHGqOq84LQbmDHFl/DQx8623t62QzPnn1IzHJ9Sjv\nrGUbiv4hUMtm/zkCTEwHXJa+qJxxBd2ENvvocZsf9kaPnyK5oQW0ThTnkUiL\nI5JSGNPQI2fiSHv7Szy1K3M4lm8qrsNExkBshx88TzPEVQshJlSw6Jbk7W+0\nBKiyLc44rh4Nu5+mBR60IHtGIUCiKMWt/zPT8HVmePxbD5dqSeG9SKOtez9q\nhZGcCyBQ8nQ4B2Dw5BF+t04NT14TByLHTlsT7rl/KmIJ8AobOC4slrlh4WyM\n+Kj5FCC4dkIGNEQ++ENNwlE4E6VxCFNTypb8I0+yt19w1TGD9CCNdcbuwGGv\n/8jJiAWYaHP35hfIucUKgURHc2D4mZfePyRojWuhwQmp+D/chAk7xDkG54ld\nALgC\r\n=rdeo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmQrQlgnlyfzX11c4/9uwxwfQxZIPuTpKsut6X+jbSaAiEAx6+OEUWHBGTQ1xoWpY4bwO3TNdSgC4VaczoUqIlnDYU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.227a4614.0_1622131447652_0.6190823640049052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-select","version":"0.22.0-canary.b3d21d31.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8530d3514.0","@material/floating-label":"=12.0.0-canary.8530d3514.0","@material/line-ripple":"=12.0.0-canary.8530d3514.0","@material/list":"=12.0.0-canary.8530d3514.0","@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-floating-label":"0.22.0-canary.b3d21d31.0","@material/mwc-icon":"0.22.0-canary.b3d21d31.0","@material/mwc-line-ripple":"0.22.0-canary.b3d21d31.0","@material/mwc-list":"0.22.0-canary.b3d21d31.0","@material/mwc-menu":"0.22.0-canary.b3d21d31.0","@material/mwc-notched-outline":"0.22.0-canary.b3d21d31.0","@material/select":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.8530d3514.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VxAWffCClGa8Ccp1Jho8Nb64v6QF3QsEHd1jxK1nMtZbQQiq48O6hIL68La9enRHDKq8sMuYNp8nK3SPg5LOQA==","shasum":"683dcb6c7f62d0f4573fd1ca0e57a6e51b207bbe","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.b3d21d31.0.tgz","fileCount":13,"unpackedSize":203855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jvCRA9TVsSAnZWagAAuLMP/3pwJ0wxX09vjicktMC3\nuBoYsRLtZ1psjppwhWDoSImYmRiAu5JOmq5dzmxOrIa3niekKsVu2haoRgH6\nPFj5N1QS24YH1LoF5h9IwbQ8cNEDvEfrhz7YEf6X7vew5lNuS2u7VQy4j/OE\n7E8EYRpqTuiezVmbp0ngiOnb3yv424bXiugsEg5EuomjitmPXxzfK+XTVicH\nQV/uCoh+uTr4r3nmsUdOdSoCF1NV4GLbYyi5jGp4ID5bVv3CbZoi3Q2BtNSY\nL9Shz4aHW3Q5+mN8Qkifx5jlhQlR5pjD645po+VKJGgMwErBnEduYllwMsjl\n3hG9hnAoyq2/fqzfdlfu6IbUgwFt6LjImYvXngPUp1DXx9b27WjJhzaZ/48I\nkh7OO8ooAaqTUeqSvahL5m5I9X+eNvY17ZOY1qp9AFXcA3RZ8UkbGhQcG47Z\nV0Y3qmozbHS0y1Sb2cbYxd5AnvcH/+6f0fzNVeA4VQVSdnw77feZDd/BArmO\nMrjXhBcxxiMPKRlPa20L6a5jZeSMlpeOc89s5gEmmSgP+40tE1FwDg80H2Zx\n/7i/vsdP1F8iLlDlpRvj+BB4+gqO5y4mEEsqS5OLgbZkEpC93tt8GDH4oKv1\nNjxhWbpedmiJU4vl/VrhYqyKS55G5R+cG1E3/RYJprszTxHC84DBlMOcI6Hl\nwk9B\r\n=Cob7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCLkv2cIiRblW2WfElSmpqQGCsUnyGtd/XXWN624pj1AiEA5NP7Uc27J23C6AT4t8BITbR3tgxh1LoGSJ7AsFlk3Lo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.b3d21d31.0_1622141166572_0.08354215160696055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-select","version":"0.22.0-canary.288c33ec.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.00b5899dc.0","@material/floating-label":"=12.0.0-canary.00b5899dc.0","@material/line-ripple":"=12.0.0-canary.00b5899dc.0","@material/list":"=12.0.0-canary.00b5899dc.0","@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-floating-label":"0.22.0-canary.288c33ec.0","@material/mwc-icon":"0.22.0-canary.288c33ec.0","@material/mwc-line-ripple":"0.22.0-canary.288c33ec.0","@material/mwc-list":"0.22.0-canary.288c33ec.0","@material/mwc-menu":"0.22.0-canary.288c33ec.0","@material/mwc-notched-outline":"0.22.0-canary.288c33ec.0","@material/select":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.00b5899dc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fN5yFakUj03qmCw/0/SANpdV9jC57p5MYWa3MX/iRiaUmmImBogBvR/yfrHNgZLJ5tMTkD/1o92v+dGqfVocMg==","shasum":"ce3ec06f7054d8b28be922db6ef4307974970a3a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.288c33ec.0.tgz","fileCount":13,"unpackedSize":203855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt90gCRA9TVsSAnZWagAAgFkP/3u8pWpkQ20KdZFpvKeZ\nTMsUbmDWGJZtf+e1lCakCwQDePp3a4V/zzsMqfKaz5KI1ruKGp/i0z5jb8h4\nAcgBvpYGJGW87YlOSLVh2nkFaRvZkuV0botQN3dxeAkWxz5mDhJOnS+b+qGG\nj/IHMGp9XTT6H2Hq0899CXXgn9OoGyX7j0FatIsPFVnM3Z+vLMrA67W0Pn9f\nVtCxK3VNzdsNidnrC+EpSX35RxlrNDYnp/H8NUbHFkeH4Xx9vGjrSLV1XWsQ\nYkjqmB3KoKWzx0lCpu2Ok4rbpJjGo22xHHUYy5i15ZjslX1a8ICpZJiPIkU9\ne5YR0WGENRpJv7MFM+I45zbWHZE44udSU/6gqP3gRFyzM57Gm3XyI4fYXbAv\nUTTWsETn6z4G2UL3CmbuDYtEkQ6Q04vv9YZV3XWVQC9flt+ni5fapN8Q5b8t\nSwE+2eB6oiA7xUkBLki8yDl3dZtCobpKAh5GUT7rCMZI1qggotsHau/LFf31\noAybrO7SES9XgbTOOn5fa9WR+arudyQQ7MA0c1LoVyX2KXk26sJAlYVbpjIH\nHok+H5Ew8UbQcTNgoWXL0rAi6uBZad//UEqOTd0NISWj261I/dx+1tIV/dlx\nwWrgH3VZBeEZbSF5kCJpYqW53R8A27yCNWpolHkZl6hoV1Vo3xfiJ+yrZUz3\n/9Dx\r\n=xqwn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLMl7ccVjNXkCx9LBC8O46kIiULUJxbg28ghXMyTyFvAiA96blajGQvPICByTXaYl42Wj90iMRGXLhCToFhbsV2hA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.288c33ec.0_1622662431909_0.8808771490299021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-select","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/floating-label":"=12.0.0-canary.474de7878.0","@material/line-ripple":"=12.0.0-canary.474de7878.0","@material/list":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-floating-label":"0.22.0-canary.7eb7ccb0.0","@material/mwc-icon":"0.22.0-canary.7eb7ccb0.0","@material/mwc-line-ripple":"0.22.0-canary.7eb7ccb0.0","@material/mwc-list":"0.22.0-canary.7eb7ccb0.0","@material/mwc-menu":"0.22.0-canary.7eb7ccb0.0","@material/mwc-notched-outline":"0.22.0-canary.7eb7ccb0.0","@material/select":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-s4cpXX80Msn/qFZevScsMF6bn+7ALWZbKgHS3R2WN0fYSdMydEYd1KeaLGJSfD0yphg7ChyWfUg4Heltuyf67A==","shasum":"c91109487f3608afd67194a973f37598acfb692a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":13,"unpackedSize":203855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTPJCRA9TVsSAnZWagAAidYP/0ZKRf9IbupFiEAe+WBC\njMrVkxfaqETe6VqSRF2pGRg0ddsZzTiIeHuMo4juxw0fMApMkuQPLnXxe3Vw\nd21a8lKOJW+IV4Vr/OJ6x62OwBKsamb9YK4LCR+WTlDvajXh4nu47SOtYq62\ntPY2V6PIYl6IerPZr/D3W8aSndxgcZluc1OIJdW1MD+aYOodVDDB5oTg3u0Z\n89nm138zzVq+UNHdu4DzY9b/yhh7BAGvVqB7xNIgTrnLGSsdxA+4lHhBE3LK\n8SgbpB2Fu2jazhtQyqI9QF7GSXDLt7p/BSobC+nbVMHeufDa63aUo0jKGvzA\nZ3ofUO8ZXH9Ch1GwYmWxMpCIOhgdLfGzwZC/ZKHyWi/qhpcWagFddhytFuOP\nWyoQvcgHyQ9opheO2tLFyclytrqjl2mnySDaE/yGBh6MgWW55sSkFtTaIN+t\nyVhnIHSVybaDPP7SjZLB2GDTIh9wSWmUOnnqDp2YpFN5dW0CvZjjpp+rsNVi\npAN4bqycovR8Mo2D8lNTCxVNQ7sl104FmTBRB4WTw0g6tc3ge54AqdwsW5sq\ncP34ZQm7YuFmdLd44ZI/+Qx/ZNcw0z/37wBvqAi8tMTPRWtOFL7ExmUltual\nsfRY6oEm+kJSNzdXwhI2EPQka0GLuA50LsLfirHxbje0flCJz/pV5UwcM6+y\np+2x\r\n=3wU3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGJgclsEr86TeLSTp0WGHwGzg4Yvh/cUOl+3hO2QHu8AiEA1aMtSGcG69/y2OH6PDlN4MuiNNrIh1GecbrLIvEDLLA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.7eb7ccb0.0_1622750152992_0.7692496118667784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-select","version":"0.22.0-canary.7fcc0726.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/floating-label":"=12.0.0-canary.474de7878.0","@material/line-ripple":"=12.0.0-canary.474de7878.0","@material/list":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-floating-label":"0.22.0-canary.7fcc0726.0","@material/mwc-icon":"0.22.0-canary.7fcc0726.0","@material/mwc-line-ripple":"0.22.0-canary.7fcc0726.0","@material/mwc-list":"0.22.0-canary.7fcc0726.0","@material/mwc-menu":"0.22.0-canary.7fcc0726.0","@material/mwc-notched-outline":"0.22.0-canary.7fcc0726.0","@material/select":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FdEUKqniNjODZjbFjposRr2zcT8jyV4tYA3F2+HxNlvGkZ4hoZETlqMyDbpTzF0ypxtjAGP+Zkg3JknITBvHLg==","shasum":"5bf575da4231f51e88da13d1c15cd31378137505","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.7fcc0726.0.tgz","fileCount":13,"unpackedSize":203855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr3dCRA9TVsSAnZWagAA53MP/jvPkUKxB8IP7f8roTC3\n5nMCy5k0kPRN7/gveGD7PpsUG5r+whtJl0EFIv+ZvMxRa/ucG2vSrHSA8Jwy\n1yy947qkl0ERrqJeXgBa39/qI6p7/NbZe+PpBemx5JbsLoSvLE3CFaZK5aZH\ncSS4oLS8bG7QthS5UJU1ga81ZsCCNxzGhvgUFQR13/QQRj42vMKWZMoNaMB6\nASMkJhrRjEkWz0/L0fKSqiFOy143VR+N8hCZqLD7a4Fcy59HmxlXRWhWLtDI\nDUqvJDxOaRVpSZd/LvK/mp1/5EdYENmvY+PmlCIoBLUdJ2W7UDUlBM0dfD8d\nB7YyiukO0Kh8C2VkueyaIc8U2KjoJADG1vvIJAuZvnpAyb6Gv+7tzZPjXlxV\n2DwFsD0g/WaUEahNk17KHGM9xkdv1V5c2z6zFBfQHOo8gVnO3UxjP3Xx6p8G\n6B/JJXvmKIcZ8L2BXRSvkS+Rz7s+Pz9BJcasX+Y2V/sUiTSBR945Xe9OrOs+\nOZADLEUHxazw6b9UBjtX1ybnEEuUaTo8XSFx2JjLOnF5qXECEMboAdq0LRWQ\nLaDhOxgrNQ6NBjvUa/0uPTbMmUAxqVD8CuexlPpccVXSQn1OsltKukahE4Rm\n2KrcA+aNhRBWGkmtvGhGLc6dSi/EddC9/RKgFnXXEDKmeWF9uoBXimZ2YFwU\ng/n3\r\n=nBTx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGVUBuxM+BHatyUXPkk2llrhIaheQlxLClsDoOJ/tlIwIhAM699yDRlxbsiStOo3Y0UkiscArdGR4Qv0GHKChnu76z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.7fcc0726.0_1623113181104_0.21413908771005774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-select","version":"0.22.0-canary.220a4e5e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/floating-label":"=12.0.0-canary.474de7878.0","@material/line-ripple":"=12.0.0-canary.474de7878.0","@material/list":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-floating-label":"0.22.0-canary.220a4e5e.0","@material/mwc-icon":"0.22.0-canary.220a4e5e.0","@material/mwc-line-ripple":"0.22.0-canary.220a4e5e.0","@material/mwc-list":"0.22.0-canary.220a4e5e.0","@material/mwc-menu":"0.22.0-canary.220a4e5e.0","@material/mwc-notched-outline":"0.22.0-canary.220a4e5e.0","@material/select":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h7atsgo4KB6kfkEZ3ZVbf2w+7v745NgsULtdQRiBNNklwgrqd+KqQMof34bJTchLpU51Ah+Q+HbojWKiW8Uo8Q==","shasum":"975f7378dec5cea3cdb03d03c32baa69d801de83","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.220a4e5e.0.tgz","fileCount":13,"unpackedSize":203072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63/CRA9TVsSAnZWagAA5CwP/RRnAj+GpAynY6upranI\nfVR8ti7SZDc286bFVEIqI00xqiAmnkntYqhXQQpbuqhj5B3i1NCPtOE8naOl\nhBSsOdTuMPbTzY8XnFZCN1uvXxBeZDDHzBrTjSxKGtsGECGsN/kd72i5HLi3\nzf+nsJzYXmjyicWxLP7kIwRtaUS7KsjDg69YbNegW9dA43NpDW9nbQtRaUA5\npFVV8IF1QvSw9yAxC2I8+W4GCAXw9vHpx32L0jladAQ6H56ofj11FryryIK9\nE55hAhQG5yynKP+OuMR/JQn4u12wuq1qtct/FdZATBPEwv1YvuIic6ZtfEdc\nTGmCi2flszmoSRwNIBjj/1X16ViNVn/nASjWDDGblUCK+b7MBZYDLFJ3XREg\ngKdNve+RpBLsV96HxRdhTAA1XF/n3k2kRRpDBuKk0XqLZe4BD7TVRElLo2DG\nKqhaJhUJ254dI+owH5ujAIQvNRgBcTk7DHDBXJpKv1ROZ4hWvKZ1oTR75gzF\nboMqkeJxAkaTQ40iteZOttZrSebxSlz0+ZVFQiHfcFVZ0mjz1JG/n4Twd/il\ncZelhxrIh2Uuw+57e6+1btuXa0z3BP0zTnR/mUWpfNht44Qx++9PEoBnzkSI\n+W9a9ZbhKfI9wn5WDXlDj3CJntYfxNEMFsAMxme41rd79+oM9JGaskp0Rx5R\n6QJB\r\n=n9T8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFe7lwavS2hUc/DqeZT91uS+l70E4jcxeQvhn0qT1qHwIhAIRocbrryqzTgqE13RbtNtF/bmWU4hWG+YbvD6/xn0hr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.220a4e5e.0_1623174655167_0.66646199719145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-select","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/floating-label":"=12.0.0-canary.474de7878.0","@material/line-ripple":"=12.0.0-canary.474de7878.0","@material/list":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-floating-label":"0.22.0-canary.6b2d6ab0.0","@material/mwc-icon":"0.22.0-canary.6b2d6ab0.0","@material/mwc-line-ripple":"0.22.0-canary.6b2d6ab0.0","@material/mwc-list":"0.22.0-canary.6b2d6ab0.0","@material/mwc-menu":"0.22.0-canary.6b2d6ab0.0","@material/mwc-notched-outline":"0.22.0-canary.6b2d6ab0.0","@material/select":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zGGEUyD+xN4McYfWEuKUEajma4i+hzDMVkD7KsKQhAj/gp3KXE+HrqtOoEWpx7PYQGPgPFS655R1s/N1HDae5g==","shasum":"1f18b5ff74af6b00b80ff196f4381944df0405f7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":13,"unpackedSize":203072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7jmCRA9TVsSAnZWagAA0ucP/RHYJPgLSMdzVfjeEuDX\nvSNm5sQe0K5eB1iEBxPx1g5CNv7et4wEjwst1aC4FTB0leh/k0iC9VaL+A3k\nK3UQTd2ktY8w3Frf40s4GuxvOYGrN4MlbbGYVHZM7e0OQ6TAkDUCLrwUUu6L\noWjex5Fi4WV1SkUgX+mg1tBfJqu1QVPwOLbpr7bVrVqHI43ww+Q5Pcrz3hvo\ngaQ6eCuFxm9ZbfFGHvcix+ZEfEpNMvIH08i0/0sPsIcCVUQ/N5xl4d+PRVWA\nkTym8wodokQTkk7lQ790LDcnJCgulyh+AygK/yJtPHsnC2MeSGZn2L5CYqag\nmV3lHZKFvafSNbq+ilTrRMMaMhD8ym6n7hZ+55sg8KzzTWu2T5W3H635jXr/\nNDdkG9PyrOGwJrYRs5CGkEXV9NhXRnCzAlb1SPyx6tpiMh7TStXM2hj82cmp\ntPIpXQ4qr9YFHzk3C1OKsO1ThGzVU7zpvgYAyCJF+Qm+Jj6HpyMr2xSMgiCF\nInmZyxDC11wWep4PMBz4IoWmDHuSBqJ2soeVmxKMq15ARASezMgBfjyDk2A7\nWDGKLfQ/zHhGnyJFBdBiqdRbCJbKlzJmqYkkKROd+Iz5CdekPG/zNTS4QP9B\np9mEjyTsCkZ2DIXF1YieimhBhgRiI0STIRR2JE/WHV2ca2Ob4c6GdDFewg0h\n7QUW\r\n=wEh/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyz5wMiGA5ryjDQXyp9rpEaUBUszPSo3fjubURPKRrrwIgRXiYPqN7GoyTkxUidS+czRgjX5LXX4whyE+cfzRd2AM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.6b2d6ab0.0_1623177446003_0.935273178563689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-select","version":"0.22.0-canary.2b20825e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8415ae585.0","@material/floating-label":"=12.0.0-canary.8415ae585.0","@material/line-ripple":"=12.0.0-canary.8415ae585.0","@material/list":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-floating-label":"0.22.0-canary.2b20825e.0","@material/mwc-icon":"0.22.0-canary.2b20825e.0","@material/mwc-line-ripple":"0.22.0-canary.2b20825e.0","@material/mwc-list":"0.22.0-canary.2b20825e.0","@material/mwc-menu":"0.22.0-canary.2b20825e.0","@material/mwc-notched-outline":"0.22.0-canary.2b20825e.0","@material/select":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Tg8aMLPLK6QVGM4ZabX5Rxzze7CK7ZlNU6g9uq95BLLeGaO2SRK/QjWmjQ8sNxLmEyDT/ei4Lk0ZUh964h2mSQ==","shasum":"b474b60fa8b36f6ccbc168bb3bf00280a8fdd518","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.2b20825e.0.tgz","fileCount":13,"unpackedSize":203120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/aaCRA9TVsSAnZWagAATekQAJY37UHj3ljmtrghCjrn\ntuKZpamMhWiN4k5VTiKEiuhtgfojqjypNEsCUULzRhQcdKCQW0WQctlj2ZkU\n/cshfk08zqF62lMQ7xy663ZrU1ea9UGTV5mnnNbFtxHgG91ZZCPyvX3C2VPm\n2z6mC8RxmT5/lOPCdvxbAxTh4TkxWf1WSfUzcEjj00dIrmQN4oDCWGsuIjMV\nVNWPUtSgQtRuNdYxLCNGtLpQtUZ92Mya1ZCnkpc+gSmaYDoTheJBN88ihfcU\nYEWRgYQ6CQRX+yExYA/fGoMCDyxWmjsDTr1sDHNywPBFPkil5yNpU9KpK/q8\nKpUTco92wsyx/3mMIAWRtOCVQ6vS6hLyuOon+D5T6W0S+vsA53cDfzFYnzUv\nv2EfLy2flkDr/SpyKvg3xPO4hHO2xonLNdtS+ou8Y6BZPv5lMeHEpWb5os3x\nJi4F23gwzM7ZVJb6DFzQ7vbNuWParAlkNcywo8ksncXgP8ocI9AzQabShnjv\neN14VVixSdafaJv7GC32fgrR7YCMoOIjIX5Rd2V4NLghty8s1ojlSAyeX33/\n9BqJmNCC0RdItzTpCXHB1J+ip6JHzRAHZ96MeU8ZwsTV/HFe8Hz0uUKUTBIr\nglvYrxPE/zCcBw3gs76OZ0KIKrwgvUeu8968dtG4K5ri0TVt+tcZHSPxeAP+\nK3bT\r\n=lSTg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRxWralM4aecv07pP9jgQHI5rCHBY2XFfOy70kxAjWigIgHpRqsNpQHTsk1gcwlKe77D+gSfAPs4P2RVLfmZW/pFA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.2b20825e.0_1623455385908_0.623885302181278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-select","version":"0.22.0-canary.e1511867.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8415ae585.0","@material/floating-label":"=12.0.0-canary.8415ae585.0","@material/line-ripple":"=12.0.0-canary.8415ae585.0","@material/list":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-floating-label":"0.22.0-canary.e1511867.0","@material/mwc-icon":"0.22.0-canary.e1511867.0","@material/mwc-line-ripple":"0.22.0-canary.e1511867.0","@material/mwc-list":"0.22.0-canary.e1511867.0","@material/mwc-menu":"0.22.0-canary.e1511867.0","@material/mwc-notched-outline":"0.22.0-canary.e1511867.0","@material/select":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FVWeJ13XVQ8p9s/kHIed6sOeL+/YlhZLEJKmcxDc+euDlQs49YOBHeN8KyAKRZYI9hYpMTiV6Y3mRxqS/ZdoPA==","shasum":"9243973c464dc7e83c25446b76627b687d67563e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.e1511867.0.tgz","fileCount":13,"unpackedSize":203120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAabCRA9TVsSAnZWagAAUAsQAISzratuLe3nzsgU3YxY\n8hpzK1emnSvEwPXW/oMrXUak0TdJmTjpDYIZJjQQtlIsKgxkTp2Uh8243rCT\neXaDheOnpy4CjbyVUCabsgLRfjxMG2TGZmtcp24vNHt98+EC++ZGhd59o+vK\npST6v9UUkDv7qvkVZZfsdvHwiPzOrRH428xkbBm6oi7krrzv0Vtgt4b4DKtS\nf1caVboXHqpyWGjUX3F5naN+SXtzrebl20hfFZqs5TDQXhvoBVkUtnr/2FPB\nOOo7Eivo3qtnyB+89Vn2iXOuguGv3PS0jvA5MMBdLsqRh2nI0agOQNGYskD+\nE3sLVBo4UMjXDFXa+Mgklvt2+1SztWBJBEOaxlbhV7/5f+xVJvMG7j+Yg1iI\nCbmBCkzwg8mFRV2kpv8Cqz7oaGfM9ltOtbsLnjYAmkQPZwXIjTkWiud0uz70\njri8sAH165EzrG2tTX8Dmn2F1IU+xpuhPMzyOCX6AbqJrczLGViMv7lETNfD\nbp1TGqFonuqENTRXGN+IHabb+f+ur9gIfhQnR4XYku6MHuZ4oJKAqKU4mOgO\nWcd1C7dcgX9Mi0DFp+PP6Dlb7BC4P/VVudPh8e2JJmrjW2hn1S9vLT/Va0zH\na86RZ5C5yFwM1dHCdJS+uqSB/DboAVwp31rIpLA37tlHCtut03n/Gzsag6m5\nW0Lj\r\n=wMa5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBcs3yIxOLGHeHOw/zTJ5y2uGnsJipBfo0zd79uo3ZfTAiEAku2e2tczqBXzM2mcKfeEYT7e4PSwMywSeLAFp5eoF4A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.e1511867.0_1623459483031_0.9256846680996516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-select","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8415ae585.0","@material/floating-label":"=12.0.0-canary.8415ae585.0","@material/line-ripple":"=12.0.0-canary.8415ae585.0","@material/list":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-floating-label":"0.22.0-canary.ef4a0c0d.0","@material/mwc-icon":"0.22.0-canary.ef4a0c0d.0","@material/mwc-line-ripple":"0.22.0-canary.ef4a0c0d.0","@material/mwc-list":"0.22.0-canary.ef4a0c0d.0","@material/mwc-menu":"0.22.0-canary.ef4a0c0d.0","@material/mwc-notched-outline":"0.22.0-canary.ef4a0c0d.0","@material/select":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-20eVzwpLIf2WaicX17UnjWdlePKZmS+tcs7PF7sJnzxD0pGUbI7tlC+A53WRkLutYOdedoSgupjuXf46sxojEg==","shasum":"00bb2e671b3ab130579b68a9c03666ae64a0cd4b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":13,"unpackedSize":203120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQUKCRA9TVsSAnZWagAAloAP/20rm5CN4Xns2ZBa1aC2\nA84E3rlfQ7h5DFkKRVbkEvUy8+pEDM3eYBMFZxz6TWozZjLdzBeEVhqob8NW\nmxmkFRh1uUOLS532hNvl5gAfHEj7ajreO1cFdvI/1jwmynbkvZC9H+Jj1fTM\nwiV+uW+g1tlhdR0CFxPZIk6P6I4FvsPOgI16H6XM1wF7t8v3TbE/quMdgEsw\njl94+U+nw0EcWYBTnmNfzYklitsjN27NTfA4U/BgP/BLNrRT987oO6DTfdU2\nhYQBFBjYSqut4D0o4ecx4yujJ4ihZuqHwIdwK4DA58q5kOxpFLrqSqR0Le8i\nvamtDeY8brKAxqNZByeEEUUcSDJmTLTWVw0diKJvIYaam5SbxB+evILQTNu3\nHAKmZ9sLlnII1ObfEQQ1HD+eKU3cBNBtu3kHciOIeesSXiTPxpWBamf3mlpZ\nJ1R2bRMaWPcnR6x2DDtThyWKGfHJ+BiCAg/x4MC1MZZq5CT07HIbWQzEWaop\ntNiptideCS6bkL5V47SUF8VSW5ugOdihbAwskWCrzW0nGueuF/ZlCdc36t0Y\nQHMcxZI+YY9/LTYXC0apUFyAsbuugLXT5BJj3MOabDjlFduQwNxTlxkcTx4l\nYflL2/IZC5t0U6otkwKsmyfLgOctf8f4SvsmFX8gS3SAVnsdkWiKzGaXn9yi\n0ACf\r\n=QVSr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmvB20KelMJRb3wzodPuF6C9hd8dv9KV5Ky4/ZUAuSQAiEAnRxYUN01CbgvrRh/h9dX4R+zzUQ1w6uulQLdQm5bS2A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.ef4a0c0d.0_1623786761847_0.37183496951958706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-select","version":"0.22.0-canary.573d8913.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.f705e8048.0","@material/floating-label":"=12.0.0-canary.f705e8048.0","@material/line-ripple":"=12.0.0-canary.f705e8048.0","@material/list":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-floating-label":"0.22.0-canary.573d8913.0","@material/mwc-icon":"0.22.0-canary.573d8913.0","@material/mwc-line-ripple":"0.22.0-canary.573d8913.0","@material/mwc-list":"0.22.0-canary.573d8913.0","@material/mwc-menu":"0.22.0-canary.573d8913.0","@material/mwc-notched-outline":"0.22.0-canary.573d8913.0","@material/select":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F+rEC9EVC13QGNeplGNREgyea7cv+S+AzeuQ+PsNFi59wRSfuY07hy+Zl8UvIKoQEkQocanZ0RopvqqaizbFEg==","shasum":"0c48ced56f8d6733876f2fc578f9f213147acc85","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.573d8913.0.tgz","fileCount":13,"unpackedSize":203120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSvlCRA9TVsSAnZWagAAUpcP/i1wlze8QZiSzWqIrr+l\nOgffhVkhb2jty3xf4DKcPs23jK4qF/lx/+Slp5HoM2fEfgZtGFQKpTxxWl8H\nzLAYBmIhufC/GdDE4y6clq+h9r6SH7vOSWwYeLi5+9H7TR8NcSsbbArMj8Ti\n8WQo+etUVr8ea9HPm6aDKLC8Qny57TONo1dmRDU0e89Va/kdYXEQhbpQra0U\nt7udOgoot0d0zaFFHypg8VT7MDYpSuz9t0XilFrxgDswXlzS/GLslilWBMVL\nZavqumKeFQmXO3FqM9y4Wn1YhlL4UQZNNRjPRvcHZCAJ9YK5gSdjiDNROJcu\n2/V66R5eVQ05G9shu+ATRz/zGFuHa9RwY5+h5m2kNDnaxqXehGIhQXnHDJPe\npeyFI4KZMH5Pbz0T9keFlvU1FSiMlQ0piEQ59pAyizUAU9IgWBkBPEzu1c2u\ntJ3yr7TwTyMJVKbc0Bpq5oif0c/Qq8dR+7IpCWZb9Zf/CbagI0fTHHrwsEIH\ng1Ghr78z4IiFMH7AUlV+UV+vDtMvWPOTEq4WvlxKfH9Omnu5l7WaCYGQ1h6q\nS/VKm7BRvnpwjdSorNahhprUOI4cOBRGs7gOBQoEsabut17jBAoN6VG0Igz2\nfandX5Y0RJNvDA7YfhOgzstQCRqMJbEIPKnMn9zLotiTvOL8mGR3N4G2wach\nof/u\r\n=NiFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQ1rhJCoYUJCDUnuTqXkPuUcnci+paVAZgdI4V7GYmwAiAPuOSSF4mX5do+3+8MHSEr6gCnzbg6rU4BTX0goxbbwA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.573d8913.0_1624058852730_0.03991298247261055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-select","version":"0.22.0-canary.21dba001.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.f705e8048.0","@material/floating-label":"=12.0.0-canary.f705e8048.0","@material/line-ripple":"=12.0.0-canary.f705e8048.0","@material/list":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-floating-label":"0.22.0-canary.21dba001.0","@material/mwc-icon":"0.22.0-canary.21dba001.0","@material/mwc-line-ripple":"0.22.0-canary.21dba001.0","@material/mwc-list":"0.22.0-canary.21dba001.0","@material/mwc-menu":"0.22.0-canary.21dba001.0","@material/mwc-notched-outline":"0.22.0-canary.21dba001.0","@material/select":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-n1MPvYtlV0YXGjP/bcEDqkujaO2Sm+58Cs+6IEPs3NwcDMAl5go8t7ailiLdB27MK3S8dxdW6xKPr1i+ZD/ENg==","shasum":"e3a341726bcf271ab48a7b31f697dbf655c20779","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.21dba001.0.tgz","fileCount":13,"unpackedSize":203120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QeDCRA9TVsSAnZWagAANJEP/iTYrSAlNbD6VY3Y/qqf\ndS1u7rJqDK0Tr6P+4X4plYusKAqFsMh+xJdDmEQQkkJq95tSQV7p7/BTdNyO\nWGNeDVCPv2bEmny4ynKHfZIoulQcY4DlNy80R4LXpe8/uUI/QyFqxkFJqiay\nptB9T/zRCvURvCafBeLlyAQjsD/PEXiSmUdq1bRjbRuInK5dim1fbaj/Y+AD\nAEUN5OLvauFC42KGTkxH5sIjPLQjtDLg9HiPJ/LzL5F4gezOUiC+rBDMeC5+\n2qTSBB/kOUU/AyebtitiefpKIYoT08t8ozI143A7DxvF4Ie5myhT531ruPEE\n7SFcaMdh2KWemdCrYYsJSSx0LPU47YputronWl+BPeTE3VoPPS0e5HZ+oToZ\ntzdOl7Ez1ouETARjpPwiaThusq9faOQWYqTc5i/74OcRmRpSShO9ily4KQot\ngrsNlvHrH15Sa/pWKfb/A1aSdGng/F8G+aOfFAiBjgA/HGmOnOyKoKlrk+tl\nOYIrpcFTJzG63apkkvDKJgm8ZG/2OC35zYR0H6PbaVtHub55JoLw0+U6sgtQ\nbzqjPcva/cbCctEPBeeGHF9pBVIO3c9bPIOEg1JnKSzyMr58SuiVZzrgXmsX\nH3hYPMH5Nah9N/AMiOUIUKNUlQNkFnAgatMHDCLxrXDkjZWhL/vNdhpTMggW\nJyMe\r\n=hvUa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSR49JtV/CV91xGj8MOzIQPMxtZYcLp7+Ub4JQnszEwAiEA27mNoqifxjD1dFigmDNyMCHgHUWfsJ9Ue9pRgUkAVkI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.21dba001.0_1624311683499_0.8203025242577433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-select","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/floating-label":"=12.0.0-canary.4ccd39bdd.0","@material/line-ripple":"=12.0.0-canary.4ccd39bdd.0","@material/list":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-floating-label":"0.22.0-canary.6f5bfd0f.0","@material/mwc-icon":"0.22.0-canary.6f5bfd0f.0","@material/mwc-line-ripple":"0.22.0-canary.6f5bfd0f.0","@material/mwc-list":"0.22.0-canary.6f5bfd0f.0","@material/mwc-menu":"0.22.0-canary.6f5bfd0f.0","@material/mwc-notched-outline":"0.22.0-canary.6f5bfd0f.0","@material/select":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NvPQOA9U2mjemsHU9ZPl6JI8HVQNHgWxJ4+XjIWWdonvhx9KCdAaeDfYZrERhfeuCJFmebqZGr6WIivlr8UuiQ==","shasum":"c9d6ba434f9209c09db8180e0e139a51e9583f51","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":13,"unpackedSize":203120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2yCRA9TVsSAnZWagAAfykP/jOo5wnNdON+h2K6pAJP\nMGxUUWXu0SqF/l6Wx5rSzbcovCvuk6SGmQBsJ/KxRgXb2PzlmyEcUE5vMIgT\nrKXBGUZyHo/c/nKWN1BxAaC5A/o2D8i7xWliKXnVgnBgYyYKC+UFF0Z0DeL3\nXjeycz6bgjibO4GlXCAjS8k7mcH0arF8HJd4lfnSHZSKA2d4KOqco3MMJXOj\nFrzRM74eppluueSZGuozqzTlWNBhMAL+f3gpsm5Rg59JuVF37A8rNL2KGEn9\nZpxcfXiMtAl7mSMeLK+T4uup12qNB4TBgNSOFbXjWhF0DEQ5smnSjSAH2wlR\nH40bcx3+fgEemyi9ISQwcrJzXvHcLg/mg1XKIL75MlrOQU/1dBF8JMLl9kI7\npQQW9724RMmLzybdKm/BX5y6/RWWxx3Oy7TbKNVnBzm3Vqgwp+qBzeASsTGS\nLTIku3VRp9HolUw3qdgOI9tU8INzda6n8qnnyTrtdOfTfzKIONwbBEarIbf9\nFy1IP8kbueGl793X1aGjGH685nKfPk4wMNyIYukAbSoEGXAiPri6opUbI+bA\nUpdCvlZaQ+ncqfC8vCodKppmOSnQ4thOtBaeMalfupaWNER2lHmv99hZzaQ0\nTkNDpBzXnvXfn13r+nDyYskGpwfs9roXGnlA2NS3nUL5ER1O/6G4D5VRYNzv\nRoqA\r\n=eaMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7H/Mk9VnTf9LjMAPg+F8b/6HnFfigvYA73zztBHikPAIgffSWBxxk+r+BQTQtb4OO94Ko3kbY+3oG28LUum71D2U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.6f5bfd0f.0_1624575410365_0.5975670109464999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-select","version":"0.22.0-canary.fd8360b4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/floating-label":"=12.0.0-canary.4ccd39bdd.0","@material/line-ripple":"=12.0.0-canary.4ccd39bdd.0","@material/list":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-floating-label":"0.22.0-canary.fd8360b4.0","@material/mwc-icon":"0.22.0-canary.fd8360b4.0","@material/mwc-line-ripple":"0.22.0-canary.fd8360b4.0","@material/mwc-list":"0.22.0-canary.fd8360b4.0","@material/mwc-menu":"0.22.0-canary.fd8360b4.0","@material/mwc-notched-outline":"0.22.0-canary.fd8360b4.0","@material/select":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X4BuUCh47Zv01x1reVsXwu0jFGial4SyJV6KyyEYOqXNiHQfB5jIlcYGztjetzeY4J3hRYibs2OHZkibb66n3A==","shasum":"377268798aee4bf390f8a162cd6d8f77a681cadb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.fd8360b4.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1ioDCRA9TVsSAnZWagAATjsP/14PXIqgWJzLylUcNG9P\nH5wjbU7fdJDNMXQqlLL5y9xEI9kWGVacCs8QBAaM8pYWDal6Lr3QHOgnWEGQ\nHQ0GePZyakwvcetLCQ+ndV30aUi4kUOk261/8BMC2ITnNwr5M60T/EdCtzzB\nm6zPhMqGRq9PxVRYhv3nd2IEdj8Hci6Qyiw7EocFIApovgRbqd5oEFHMgnaD\nlSWDWPVZYje38PMzr9GJYyUU1BEvbiAcNXqzmnGVAgmo0L9MchFoLeoGT/3s\neOwYM8PACxLGTs7AS/BI4zdMPZ2pfmlCkbzjRsuHqJP6Po5UT9M7yBfbbeJX\nXR+qV2Gqusj21IRhr7lF5ETHaLir1BqRAeSbPCXstnN+Lc/L9YJESthGqNRQ\noZMdVIuXhbRRO7X45QGMGMPl+t+l/WBJFISezhpp+k6piDRq5FtoqiYMYfb6\n3ZON6AHK4DbvD7tTdsMWwsFZurVhhJnxNvkP3CWKq6C9/FZJhg3kwUnJbxeJ\nAnlDOwdp/MJFSNqOCPMsMJQqArRJukz9kXVBBiu/JP9Ci6vasxk6sYbP4jMx\nufryAj4vXe+16nXV0naQoafERY6UmKQlBZFFqROKjHNbKeVZ22s5pJUbWZ4d\nvRhh3XrbOF4+gOVqkgLx1lFbCeRSX5UZYTowgNv+tIvhYoElxuwqmZA4iDG5\ncOKW\r\n=AGz0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkujhDxVyYZpU70UH45YfMJWJgFzuIIxcyCFb4XePP/AIgI1BLFPIK4XVoBjP6KEt4NF8b4pa92bm8LItKIO2R3ts="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.fd8360b4.0_1624648194889_0.7734967494877436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-select","version":"0.22.0-canary.6f74432f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/floating-label":"=12.0.0-canary.4ccd39bdd.0","@material/line-ripple":"=12.0.0-canary.4ccd39bdd.0","@material/list":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-floating-label":"0.22.0-canary.6f74432f.0","@material/mwc-icon":"0.22.0-canary.6f74432f.0","@material/mwc-line-ripple":"0.22.0-canary.6f74432f.0","@material/mwc-list":"0.22.0-canary.6f74432f.0","@material/mwc-menu":"0.22.0-canary.6f74432f.0","@material/mwc-notched-outline":"0.22.0-canary.6f74432f.0","@material/select":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W8ZG5oELGKzztesbHjTFgEApiov+IutChwaqsGFmF0xZA947JtgU6gv9s5rduGwi8y4mynQv1MUlPDsTC8urtQ==","shasum":"8f5bc00787087e28cead8b5bb5c218be1b4c850c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.6f74432f.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDzCRA9TVsSAnZWagAA2UEP/jRPuvFfoLka+R0+w5Ul\nRhfdZJMDcW3rjyXdHGEhSX2u+XmHuS1uqo7LlWgNREDkM4mhc4nXMs04azlx\nApvE0SRdMfJcp+wk1GgfOqRQ7vZD6pACC7LWhZc07ood6trJaXGPCI/YGJzl\nbbUOQ78bE6HQR7IX5uP7NCzqcf8yjczPVG4g5Djlzb7tTBkFbkkxc3fj6zOk\nfzHj9lEzSQE39mnG7R7050l8X2oyS3DO/cwOe0OGTTvK2bHLxbbYXjEjmSLp\n58XdlAAcUPKSGYGsT2Yn5czdhECfdpDGwfrJQm5KNf9uEROJNsNzPEPLhRDa\nzhixxEyF5JMnCF1xIoixy7tglZaMTUGCZBJx1Vo01/9suxg4pPwxgrABe0SH\nVxX39VXuyi4ChSp2kqNNtcywBjuOLuSm0XwVwOchij/ghuQ1WSOhSljJIlgH\ncGKzTfyZ6IlkHqnPtyNdy/4FCVijf2w/ktGuaTNYAMDsdCd72gXHYMz8nxwO\naTSXMltbgO+p3wsKFHvPUkLgSaG8OqmPI84zzJH4ON9NB6HUhtqrvB6Ry86r\nydsG8NV+FczFuZSikM6R3nTUgYbrfdB/yL0ydHPkzMClRBME0y6ghvgFeeJT\nN/jVDSZ2Sx2WqXkyRTVC2zLwhl9RamPD4jXxOx0v4AzMmDZKVvKY0flBAEFR\nfrWi\r\n=toDb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjkq66UPgbNuF46crJCdbUB5BLili3PhORoxTUboNksgIgPIoa8IpuLlRiliW8PyCOQqOxTfMul3ZCGtdh7eBu8R4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.6f74432f.0_1624654067140_0.4829626740086417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-select","version":"0.22.0-canary.b62f901d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/floating-label":"=12.0.0-canary.4ccd39bdd.0","@material/line-ripple":"=12.0.0-canary.4ccd39bdd.0","@material/list":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-floating-label":"0.22.0-canary.b62f901d.0","@material/mwc-icon":"0.22.0-canary.b62f901d.0","@material/mwc-line-ripple":"0.22.0-canary.b62f901d.0","@material/mwc-list":"0.22.0-canary.b62f901d.0","@material/mwc-menu":"0.22.0-canary.b62f901d.0","@material/mwc-notched-outline":"0.22.0-canary.b62f901d.0","@material/select":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mm47G/eDFjjt8FtjDLRCNpY8zBtYuTXu3PASaqubanQyvTdt6p4jBkLMOsrUAbkcqgdCA7VegHTg+u1XDCa3DA==","shasum":"98572d0cc75a1820a09cec4595c5d5cbba7ac77d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.b62f901d.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lYcCRA9TVsSAnZWagAAGr4P/1uDFJZqzS3vugcE875b\natlAcCXQgjcEFbVF+ndxXF32F7gQf51RTrAIYDJzoRLD1ARBHDWI3FFVVlP2\nrkqoFdVnlTTFC6wNSjMDN+Cs/Q15diUCa76k5W6wrhSAb6w+oyBrdgELclVG\ntOmtUP3VXd3tCLpXtsxN6m1BEafiCZNQNL85JQLb/rAghoIk0xMDZg4CA3VM\neDxDQW3bEBzwzil9u8KyQ6TAXDOwflhCaZdTACf2qdGGwcW+Dn+sssok2+7C\n2W0LbPbH1YbYGplGtMl5im2dvZv6ptcVHEj5ZQErYXj5iRuNWFXrrdUPCDx6\n3mIb0pCng3oZs6rociKyGGVPvYUgPiCG5ECVrgIl/x1A6ltULDbkL2CVnZ2x\n/b7f/hCoGiiwLGtXCVe5FcZFIVAlXoEOpE70lf6sxBLcXVYl42fIMPD5wpBC\n+Q+V38H5oVcVjEq/BmpkpGMjz3o8jXIygfEqw8Yae5e9AE2/kpahjbmbrrwD\nn7t0734DoXlFe9zQP5XPNsV+HYth75iho2jsfQeLDDvSsY5nAuugQrCmfSnC\npzwBaPfuFy3Ajua4HJs9g8xQzsS4ahhMRD6/ARg2m1zTvDlb9jVNnpz6HMAg\ncN7aHizQZIT85ZXc7SMaREY5wT8xzFaAFT3ExsLAWo5r/OvePDRW2hb6zdhV\nO2DM\r\n=yx+c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2sAttfT1i+2Vr1hOnFz/guVKkXFUELxVW1IcaP8wSjAiBfXptafyfHbX1JD+2CCJlEnzl/AusrPeea45hKU4lFig=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.b62f901d.0_1624659484423_0.9207372792799182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-select","version":"0.22.0-canary.73122cba.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4c80072fd.0","@material/floating-label":"=12.0.0-canary.4c80072fd.0","@material/line-ripple":"=12.0.0-canary.4c80072fd.0","@material/list":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-floating-label":"0.22.0-canary.73122cba.0","@material/mwc-icon":"0.22.0-canary.73122cba.0","@material/mwc-line-ripple":"0.22.0-canary.73122cba.0","@material/mwc-list":"0.22.0-canary.73122cba.0","@material/mwc-menu":"0.22.0-canary.73122cba.0","@material/mwc-notched-outline":"0.22.0-canary.73122cba.0","@material/select":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0xtCV5zwUm55vyIWlAa3Xa5Ul02reniuPtVHwZvijfywXQk46IzjcHSx5qx999cA7whqJ9gq2zh5TAuXPFD/hw==","shasum":"ddf27bc88897e5a34dd8d4659e95117db7b0eab0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.73122cba.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MgACRA9TVsSAnZWagAAR/sP/A6fPByRVlb2GRyQqU0d\nD8PYg08q999kMzTDZ5vb4zBMwfA4BOWpN64lT/2ZkD6sR4+PghXkEQacF4Ho\n9up3kYD/yeqQqjtYLcolWSZ00u56C9j5DOrAQe653Kd8An5oIm9nOM84NRSY\nHX5vyKL5CFmU3EefrNFqDWpAgiTwsGm283W8taZteH6MqqnE4hlIZ9R0I76Q\ndxvDIZv0BSDkEvddaGc2WL+NUic0nEcbsAi9hrYtZTFcgU6Iw1ze9i/TEN/I\nA0YEsiN5ElkYPs2nFiYHAeL8HboW8LnYGn6mamAxxntULW6TtMx6kgZsGir4\nRE72UnIa7c8GyCrPXz7IV+eTWH5OJNlwCUvChLBPQ0Ta4fILBY/VhnN7+Lx4\n4QRiqODT6/RfeWgSXb93Aw78rusMi8ddXqaMK1NSlif79tA6+i5EhsrTVuKl\ngI4FarsEcu2UYZ6AnplzctM6fEkaKTPL+unNu+wk3KypmMsEgNCKQ4KTNrqc\nV0CQ2nfRXAQ4OpW05H0ukAl6JgbG6ntx2Pw1khBv/fl8gyiTa+MXTucfzUoK\n7LnJM2uRGLu2Xlk+gGR6Lm8TesRjc2bV5443R0zx/5rC9IsBNSZHyYRor0Mr\nHOdvnI1JhjUGg4zDQp35y8ge4ZrHCUqfuyyJcmpQACMxEV96tcvBmH/cQvSD\noi7t\r\n=26bS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqi17n1d/EoDM+qQHN6hJPFRGTJp8CLaQj/ABTw+FHLAiB8YhWJ2/yDrogbzOEU47MJ8sSz+njOncGbEQ8aybbsbw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.73122cba.0_1625081855799_0.9503276082804917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-select","version":"0.22.0-canary.a6912af5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4c80072fd.0","@material/floating-label":"=12.0.0-canary.4c80072fd.0","@material/line-ripple":"=12.0.0-canary.4c80072fd.0","@material/list":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-floating-label":"0.22.0-canary.a6912af5.0","@material/mwc-icon":"0.22.0-canary.a6912af5.0","@material/mwc-line-ripple":"0.22.0-canary.a6912af5.0","@material/mwc-list":"0.22.0-canary.a6912af5.0","@material/mwc-menu":"0.22.0-canary.a6912af5.0","@material/mwc-notched-outline":"0.22.0-canary.a6912af5.0","@material/select":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RO4S4LUB55u/xfWLWNUmlztKdC7nyTbBFCv12QLzAy7PncEYpuswcj7vBBVK5/ZwZ/ot1qlyggK8VorXTTU3Fw==","shasum":"b58b13c0fab9efa9680ed7c4660116d58f33ad80","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.a6912af5.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jT6CRA9TVsSAnZWagAAAnAQAJ8US3+UKn8o8KLabZBI\nD/Ap1VhcIYWiWVgCFW5A/u0rcb9Z9Pnhnfbah1xKJesUrDV10AM3Rq8nqWaT\nAiCkwNZVWkO16EkdCas6vlrdXHfTlhtsMGNfTknxK7n7mYulOawnO1Dt5zJj\n5zAZnmQCwBKWZVODlJr4pNbw/jSqKrpeB007TmczRQRByoacTeVaO7Z2n+QX\nT10pJ+TOn/R8bGuObu+2fZCdMmITWJpP3kq7OCN82E7F82O11Nf/Cmo4rfCN\nxaS0J/rsNNhUW1GSwoYpyI+GsRYRfNuPeQOr1XiqYuNohQzXO1oLbTOspwqm\nJ43RAZ9tqe3kRdwqG+xAo682CX9aN6XYYWGdXF7OjXCjetyvU4d8HDbM87aG\nc2VCROoapAc3w7Eie5NGsRyTVYlGhu22IkeDnHrJZsAYImS8zN2ffRWaYLHB\nF1yYkDn4cZn80WUNt87CMR9TIh/7pYJN+vykyMIQZDM8Z9BtH4lqnIt2umIQ\nYweqMSRmGw3zsO8zci4YxTcvYZpnvuwOjjpivsfSnlE0JVdw68symTFouGU1\nw0h51KQFJ/CoO7nQUMINN2m8Jih89iBNDZlszu23LpNdv084QORifs4ld2Nz\nZHql/zFLZdWPLWgMsXe0FHbmnmBd0MFd8WiZ35ebZaXn8rBr7JWBxLQkIhD3\n1sea\r\n=Ox+v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4HAx6gZtFatURV+7IluWuBzGhurfRh52PTgqcKtyg1wIgQ2oA+EF7npibLtlTd5OF05o9tvZCmBXnvXt0Vhz0muE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.a6912af5.0_1625175290438_0.08822811954943299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-select","version":"0.22.0-canary.134f24bf.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4c80072fd.0","@material/floating-label":"=12.0.0-canary.4c80072fd.0","@material/line-ripple":"=12.0.0-canary.4c80072fd.0","@material/list":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-floating-label":"0.22.0-canary.134f24bf.0","@material/mwc-icon":"0.22.0-canary.134f24bf.0","@material/mwc-line-ripple":"0.22.0-canary.134f24bf.0","@material/mwc-list":"0.22.0-canary.134f24bf.0","@material/mwc-menu":"0.22.0-canary.134f24bf.0","@material/mwc-notched-outline":"0.22.0-canary.134f24bf.0","@material/select":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/1LQgtPX5oqU4BLO6XNTdlLgb+fA4M1r5jfBO0dTjUM15SlbBfPNifUfrF9u7z+hBX77ZLyzRe2Igzg1SJjxTA==","shasum":"f59cab71374678b75d153ff08cadeb2b4effdc1a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.134f24bf.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kKnCRA9TVsSAnZWagAABsYP/2Smbd9aKxU9G1K9732I\nY0JUsS66a49jyiIuSRcaPC1sY1NJbwVztXvjatl+YLLGE33cDVNsJfmpGZyq\neNftKtuehVDC8mr2pZ3IGGZ/wzUOItalUOhe7oIhewGIOkoN+sfCNZMcq60W\nzj7xP8WSxvM2biHp4MLirPxpokcCnc4Y+c0PajBMzlW3/novd5+tRSB9syW6\nXFehjrZ+MODlU8AOBgiPkJ5NkzGociZleqMqaQbndIioZKruXpaoazOYEz9J\n97PhBDI/3UnKbSqIdGFOPX1YH6QdFkkxr92mDiCttmERTSoGETQQIT9U4gtB\n0gB0ugsEcIq2ufnOnFsido16mOHylheykS9VSX6ADyNKEf+PwJdj0obc2KDK\nnKALMbwsXEukd94GmIuR3n08ZgbDnSafBFKBBbUyzRyZgR4nRHhBF4j1QEJk\nid5RH7Z2JCzpvNVD3+vM+LBJ73XsnGEDec8BWk1Aok6jOnR0le6adR+KSq1U\nyZwMPaGCifJfPB5CkK43ntQZLFbCE7JhPgzhS4npV0KN6o/3HELc9oFWugC3\neMSRdx3IhOsmVD8Tcut7CxUXwhmSL+9xxzBIB6wDmP6LnXbe5GGMWoOemFOt\n/C8HrIH3b/5/kmi3FzK0p30cfEG8eDJricVhMelUx4uMNrBvcE+ib247pisa\nXnt0\r\n=Z/1c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDb6QwSGdGy8OIDd9ohO5nQrQ/7ETMii86mcd2bjhTkjAIgeQUxaFdKucpA3sVZ7xWZJj/LvLz7KDDPkKAZgBCpTpM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.134f24bf.0_1625178791139_0.45693202626072416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-select","version":"0.22.0-canary.1debb78f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/floating-label":"=12.0.0-canary.d0f9f3f2e.0","@material/line-ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/list":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-floating-label":"0.22.0-canary.1debb78f.0","@material/mwc-icon":"0.22.0-canary.1debb78f.0","@material/mwc-line-ripple":"0.22.0-canary.1debb78f.0","@material/mwc-list":"0.22.0-canary.1debb78f.0","@material/mwc-menu":"0.22.0-canary.1debb78f.0","@material/mwc-notched-outline":"0.22.0-canary.1debb78f.0","@material/select":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eEyH15Ncsi/EA2CvPNk77cALzS5Ihc2RheGzN4hD1N/1gGUGZQhBuUnd2JyybLZUBg9LofGIL1LyXDm7yjNY6A==","shasum":"35e87f6fac8ad86e047cf615bab42c0b6a7676f5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.1debb78f.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PmSCRA9TVsSAnZWagAAoA8P/Rxla9sAjTXOrrUmrPTV\n1sHazr+8CVv9wAA1Hw6JF1Xur29mL701MUpXmKG8PHw0rBzZ48d4D/W3eBTe\n8o3fgjyly1XoZd/g7vSbmLjJRRSjKHgzbwsAyfNOk80NnWNGS/nodXNV7r9y\n91/KGzJWzt+P2uofK7nequ8cbCuNn5qGS7SqsEl65ZxXvA/p/eIWuguVXX0K\nVYGb47vcGNj0DOyAa4KxZqV00hCCUBTlx4LciPXHv8WFQDyNuq+z3C8b2zKL\n/NWV2GYjPK3pS1EkrVisSFbPE2actmuNv+FKjOl0zNNlpwckNDKXDHRtTK1f\nBME+wBen6HVk/qK21mxH66NUEvYyM56r4lQEZEViuypc2TZAOb83/h1M3tD2\nprUUSs8Yz/yUqiTxGumpvhuZ6u8q5fWj+NtcpP9qqVVaCz/xb/6ToZgw5dC3\nBSUiCYgK5MRT/gEnrGs2Mk1pcT2sOzGbHs8eit/44YnS2zFkz5XdQcdnCyrR\nDrwjdsxyPE/ywEp/Izq1SRW9LT80V7nNOc6Bi/VETduL/MsFcyOCM+vvC3Jz\n6RBjRgPeNJBhZKT4E5QBL5FRvNPz04e+ScgDbM/Pmq1pbbhEzOA+baj24ZFt\nhKWBZSRjmcpa4nydtiYFrhPcHFA/kKcN1UqLpu30BFrp9s0NKWmt/7s21P0m\n9JBQ\r\n=gPUk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZxKsrEbEoqZQHNK5lnPWzWLQUNP0vGaLcPr/S7BBHsAIgagzUUXs0K7Naz4iTAtomsUU74btFgljJw+q6ZmWSXAc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.1debb78f.0_1625618834035_0.5114628679078643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-select","version":"0.22.0-canary.d53edeb6.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/floating-label":"=12.0.0-canary.d0f9f3f2e.0","@material/line-ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/list":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-floating-label":"0.22.0-canary.d53edeb6.0","@material/mwc-icon":"0.22.0-canary.d53edeb6.0","@material/mwc-line-ripple":"0.22.0-canary.d53edeb6.0","@material/mwc-list":"0.22.0-canary.d53edeb6.0","@material/mwc-menu":"0.22.0-canary.d53edeb6.0","@material/mwc-notched-outline":"0.22.0-canary.d53edeb6.0","@material/select":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zfpCGshIZQuxC+aEdtUj8l810uktx3DpMcd+53nE69UYxyh3jFkmP00ZMwE3X7HYlNYCAxTLZbcRTsoxZavn7w==","shasum":"15f46d0b07eec81119d74486c4e621d3ef78a8f1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.d53edeb6.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d3SCRA9TVsSAnZWagAAh3kP/1ChlQq6+iLFaCbbuNbU\n5bfP3Y5fZ/xdJbFI2aGeTioGi+qVepWRbCiZfG0t0XlN6SsTlgyCdA1xdBcS\nR3dH25NtMT3j3IxnSZ13njaM83an/tP4Ys8+Tf6gQV12bSl3oqlcGT2xO/n3\naZnZzmmku7lCR1bPsRC2P/qfIWlb6NcZap1qFSy5GQj4L+yj4I2+81F/5Q5P\nRwCIPNeBTk7vXhgqfBv0F4tqmdSD+dWTzVAy9N2Ro2Yu/0OIkCmdDQZJhJvg\nlQIucduITQZoY5RtIJ74ha2S0pEK8kO6t+no6ADHq7kFvDOT2GFKsD1+8meT\nqBBhE+6Co4sWmvoOqSvSW8TALbo8gcgFv7Qj0tLhjpVRSvxdGb+LdjlkDYyN\n4zywRtrWwvAGOXdq3t7xx0LtYaBETQdNr+D2JOvDzCX8R+Cms9XJz6YQb7nI\naUpvGjCUrZynoekXK8VLLITWu/IrA5+7OZEHSNLkpqKktmnkJgmD7xZlgCE7\nPy+DqML1ILMklpMdeSPeg7oZmNeNSezRfJcLoJiWZRTTjDcN0VaSYQS3s5i4\ncT00vQkds04X+ZM7QjlFqAR54Ocokie9nJgPRqBZoX7l8jq+HL7MaQJgGCGZ\n3Ei8Db0YANbI7r2uU45maqkcxs1sFqn7Ns6t0/CompaDB4E4HotcI74/hlkR\nKfy0\r\n=qrcc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+XHzE9IqENJ6xZWPZvciBGu5XQ57HyAIThwwdACeYwQIgTvCW8M3QSHSgFDlL/xlbHaTAwtUYFzLcFQuqnOUNSTI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.d53edeb6.0_1625677266065_0.6098926201481816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-select","version":"0.22.0-canary.2226489a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/floating-label":"=12.0.0-canary.d0f9f3f2e.0","@material/line-ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/list":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-floating-label":"0.22.0-canary.2226489a.0","@material/mwc-icon":"0.22.0-canary.2226489a.0","@material/mwc-line-ripple":"0.22.0-canary.2226489a.0","@material/mwc-list":"0.22.0-canary.2226489a.0","@material/mwc-menu":"0.22.0-canary.2226489a.0","@material/mwc-notched-outline":"0.22.0-canary.2226489a.0","@material/select":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YKsjcBxj9+4xkQBS2g5g9gk3tvHqwqvYF/DegRY1Us5kvaYbr3oLx10R7NEGz8m2XrwrLWD6qvucuiEwaEj3fA==","shasum":"dfa298ed879bffaec8b7b1e15c768c280a99babc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.2226489a.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2sCRA9TVsSAnZWagAA2+oP/2vidZHNh3YTHSigbSVF\n0ut9vg9QZgtMoQr3FkbPnQMiwD2g75OUfH1Wu2JNKUghTkooRkoubvTGNtv7\nsbt7C9GW+3biATzO9/tWviabgL+5Oxf7e8A/8JnCEscP9672PRBOjsj3NyKc\nE0PF6Cv4W18ilnPr2OZedAabfS2/GNQGeBLImh4FqxPkz6k5/sfVsgYRf21S\nRt9EzZndKi2UR0DRTInglyZ+gzFDlPPU2Y0jyIiCTeDy0kHgGZcBs5jOFlPJ\nVfakUlEnk08dBZcr+nGs1uwdEwnkMKwMRJ9MULTXF7riyUz8ikqHjQs2g7T+\ncMGlThgQy3MENtL0uu/Dx5cSioBn86P4mWs8GgmHXnN51PxbSq48gGVbuN/v\nV7n0OSmu4hFtLtXmtjEyx7lTllNfas45UCbQmsVCKIyMx0gNJZ9VfQJ8bcrj\nH/SrkqexX0k3r8yM18mpyTfMlMZd4c0h46Au5nTzxeaptojuufwDFQWrY/6U\n8BG2Tsz4Y20ZjWxdm8Z4oQZiR9LxvTTGUHlbbNBjOf+SCkwY1jqQ726vOmVU\nd/y71kQ8L7umlNQ5brD5mJ/Q0RCIRnZFywUAZZzjigq+RArDQYbmhCkERlFC\n8psgOmlM4Uh9bJhIg6J/AyG9UV+HYZMUgp6OylyIz/Edbsu+WFpf+Y59uHRR\niDMU\r\n=vF0R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWfdY8lwSQ5JH/aQ56sve9tkd0ArnJ/jT0DbjmaExafQIgdvv0CBcODltBVFR+yy6qAGY9gq/uBsZ2HwgHx0p0+3A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.2226489a.0_1625767340073_0.2864007218730522"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-select","version":"0.22.0-canary.d4801c11.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.adeac0549.0","@material/floating-label":"=12.0.0-canary.adeac0549.0","@material/line-ripple":"=12.0.0-canary.adeac0549.0","@material/list":"=12.0.0-canary.adeac0549.0","@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-floating-label":"0.22.0-canary.d4801c11.0","@material/mwc-icon":"0.22.0-canary.d4801c11.0","@material/mwc-line-ripple":"0.22.0-canary.d4801c11.0","@material/mwc-list":"0.22.0-canary.d4801c11.0","@material/mwc-menu":"0.22.0-canary.d4801c11.0","@material/mwc-notched-outline":"0.22.0-canary.d4801c11.0","@material/select":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.adeac0549.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ae/8LAYDK/vhb2FVd4ZAyiPgIQPormbm8A/o9lYuhncV9u/QTMMS+EBBvuUBOFPSNdzVxK8JbPoLessd613bLA==","shasum":"02cc15573ddff9d4fd7b46c8180027f30b3900de","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.d4801c11.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51oYCRA9TVsSAnZWagAAcjQQAIGnvoZWDaSNHPXohRUf\nhNUcHQj5m4wZniT9qBJ4A63e42EAfO4rDGwT7EQPgk51QYWW0bz3iPgS/7kG\nvF9NShPoPFCcTeSIOHxDmhMfhnM4jAAUqDH6DCA1z+jB5s5tqbR4RECKhyJg\n2JWFV99jhDknEDwSpSuhxT4j5gpyumUEEFelNgvPnfTHHdqYy1ebk8wVXz82\nzz4/1zJEw6z/r4zg3OmFuf7iceICt0oMj251jovPBAjio4+RK6iV/vXtXdkH\nsjLREEEtt+OHqJPc6NMqIP5D/nK3IAAuqHZVx6GwMZKrJ9p1EOdQcOpKDF/7\nMygDRgQbUAHM8tBPCGAazVS/8jKj762zqkIdow9+zKWmY2g3viTic/iOGpUP\nXVtjllV3mKjHsli65obtLs9vVIAYzWVTijJAgZokMkG2h6cxbL1seVH1e1u6\nObIqXY5MmCPXuja0ffEa9nkd6rP+nKGTC+tX0cjP/L5nqmKfQE/5cQ210FD3\nQjZeWfCIszi3bEW1vW5hqazws1HWMvEI7l2Fk2Xa/dqiiUCV4O4CIAhWkvWj\n1dmy5AjDKcd0GQdnsg/n+2sVDzMy/IX87dru9XlOqmGCzHQnq3kOiIq7PeBR\nEtcsXT3EuYbDrJFWxi8CJd9S2YTzU/iQOdGC+/BTc+5x1Xl0HwS/OAIcBPrC\nH8i7\r\n=zVI1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjTlcu5O+tIgy/HjtaA6h93B8ulKEH3OnDYOc9SA4RYQIgN5uJ//4Qwr7j33O6WSiBs9uJhzY+r6ycXdnsnHt9UTM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.d4801c11.0_1625774614367_0.6064551150715771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-select","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.068fd5028.0","@material/floating-label":"=12.0.0-canary.068fd5028.0","@material/line-ripple":"=12.0.0-canary.068fd5028.0","@material/list":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-floating-label":"0.22.0-canary.7ec5f2d6.0","@material/mwc-icon":"0.22.0-canary.7ec5f2d6.0","@material/mwc-line-ripple":"0.22.0-canary.7ec5f2d6.0","@material/mwc-list":"0.22.0-canary.7ec5f2d6.0","@material/mwc-menu":"0.22.0-canary.7ec5f2d6.0","@material/mwc-notched-outline":"0.22.0-canary.7ec5f2d6.0","@material/select":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-muguj0ozmJKJV203AtQBVkKT1XQoknSPjS5XNzsRWYvp56xZYd9meQ6iR81jSN0mv/1nr1J2DrQGrgkihrwL5A==","shasum":"bdb6622e5bdc05d9940be37a12685940b7c63aa3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkzCRA9TVsSAnZWagAAvD0P/0EPJA17inQeN3J1pzsC\nZqmjFcjvZj7dzootf9JeX/fsbSm4TXAlrtxiWy1L3wKiP3w9xFhXPkBaCvKC\n9aD16AP12FDkPJV0RcTO6Z7JH9iR7kUwRQHp3l5w7OdlVQ/iMOtg8ps4uh5e\neV1KQ52w4U88I3jKcENrUjy9zsMWujYe5lGgzn99tiH/Q3yhqYTUt5zsfwkJ\nWuRfJi9Ro7g8/vb7yVycwCvEsY/rJAeZ+SCS8oC66snUsgYpX/RMnSsvuDhf\nV3T1cPX+EyvzWW4UYbBbIm0Xp3nK7w7SehFwog1ojVqvI6HfcbgXsR85uQqs\nioKvRkEVsHUmGXvLHDi15KrrjcgTMCaG1H0HBagqlpDOur44pNnDdhH+IqM2\nsGavJgYXymJeiV8f6V4UQ/IctzG/9+RNxMSs3wV1bvegukVYFjbXs/VKUmiF\nSvT6oM1ipdCuA9PeesNFe5tEiIdcIq9cd5vgNLarOKUNtIpsTY5g5DTGX/iy\nKrMMFKLEp+FnnLHGbaQYzbFioR4KeWaPE3+EoqGurFjaZBEGttmOTx9pfqR0\ntU/lKZgrj9yM9gN4Dg8s8CwVxE9lUVZXo+ccXP6LhdMmxr3BIZgioe54hFZv\ndBc0W36AnwRciMxSz1tZitfV9I7OdFC+kLwoEfOOH6NcqwaBAJdj0koioiJr\ntamm\r\n=zFay\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOVn0TkG7DiXCflAvjJQLxlfcTKYzObGpk9CgWb2VnvAIgDmo7/BMto9Lv4LVt0APzxy6sCY4+Dn6DmMj2fr1/gs4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.7ec5f2d6.0_1626110258626_0.6354610045387028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-select","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.068fd5028.0","@material/floating-label":"=12.0.0-canary.068fd5028.0","@material/line-ripple":"=12.0.0-canary.068fd5028.0","@material/list":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-floating-label":"0.22.0-canary.86cb4ca7.0","@material/mwc-icon":"0.22.0-canary.86cb4ca7.0","@material/mwc-line-ripple":"0.22.0-canary.86cb4ca7.0","@material/mwc-list":"0.22.0-canary.86cb4ca7.0","@material/mwc-menu":"0.22.0-canary.86cb4ca7.0","@material/mwc-notched-outline":"0.22.0-canary.86cb4ca7.0","@material/select":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qf3ScOKHtBqjozdjt4N0DShZy+xY1+KZkh02kDIugqKcET/xQtyEGRhFx2sv4XoTCuVLwzYXWMVGrRPPsvnqzA==","shasum":"5e6d49c7e0db7795e8a9264327887c11390239d3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.86cb4ca7.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c+VCRA9TVsSAnZWagAA8OUP/1Cdn2ZdOz3/p31dRmVe\nMN82VF9D+nIhxKHhQn1SzPxIEQc9jZjFgqs+D+Y+4isLpkHExHTr7KBGr3m7\nli1gd1ip4GsX1ZYklAyaSdQcID1ivuHAU1m6crH3XBEr6OJJXb/OMpntKIzY\nADMchpGx/Z2vwdPakwZZ0i/YkorQu7SQZFF6yaJPuBrhRLnG09bebCDL/GF8\nCJOnQ895OF63GxUYwFRxLhG01r0aH567VQKnwmd2FnrMZSKrNEg3SyDGyJCC\nWUZFw5KB9rUYOA1+0wxLxWI8uIoo7zbkulz2J3tDO15O8GgepLftxWtmMdDf\nP5V6KvNQysLH4mi1QxshRtxKonX8ck9JEGnAK9n6TzsLGXHSwwtRKmvvmO3L\nZTb+LARG1IEKHtAb5DG03POtoxLHKrhMpkE88xUUH0IWidEiwOT5Ga3yVg6x\n9em6N+jr5hJ+yU1Y6m1l7a1XU644avkSUNxTJOW5mNkIEkQGGafjDSdiqRT5\nFvdGcn6DVlJt0zqC4Ao0jjEGh51pmlU0GiTStCcl02MUpO2co2rbatsX2pnX\n8qwtnBU8j+7jPqWXAz2y/XzDF8arGcMmnc5uA5GLrI5nRR0TMF27A9OjgStg\nGE7LKffz6Za/H1+bPitR2lNsgiR4+KxVXfagfCQgbFl+CPO/wh/9AqJdargp\nCSvt\r\n=3L7u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFXGggq9+MoE10dSsg4lhYGNVsILtmjCEyTktYEBo1ABAiBaFxp4KKZFkx3HDPK9SoVpC26y2S4GTo7QNO4V08V9PA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.86cb4ca7.0_1626197908769_0.8644811481597254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-select","version":"0.22.0-canary.bc9a724e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ea77795b1.0","@material/floating-label":"=12.0.0-canary.ea77795b1.0","@material/line-ripple":"=12.0.0-canary.ea77795b1.0","@material/list":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-floating-label":"0.22.0-canary.bc9a724e.0","@material/mwc-icon":"0.22.0-canary.bc9a724e.0","@material/mwc-line-ripple":"0.22.0-canary.bc9a724e.0","@material/mwc-list":"0.22.0-canary.bc9a724e.0","@material/mwc-menu":"0.22.0-canary.bc9a724e.0","@material/mwc-notched-outline":"0.22.0-canary.bc9a724e.0","@material/select":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EbuMTBcxvaPO+HRlNLmjVHI3Cln83gP8c5jCG4VYEep4NJFGh0M7Q3zZgO815z53C9ma1zz5KKLv7zXA6gr+ew==","shasum":"5be2126b096c80c256a17276732c76117cd2ea59","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.bc9a724e.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6rCRA9TVsSAnZWagAA17cP/3qXUFwcNg8Pr9Neh8nL\nMlERzfLPBRPIhzV3/0fmHbSS9nB3fpNju9djNRzKoO2SYZL90KcVWRa3MuZ/\nRdOQNeHPU+xD26axYcYvUAkrbgwh8gYjsYD3d+NrUiGr6WH8qq8BOxXqOaRC\naIenUaBQw9GeDtkSfDdm7QzHA1+fhE2YpZAWIYrX6id2+72UXYi6P9K3zB7v\nJQTIZmEFuhnu5KG4IuW2cB0Y4RvU6aE5fwXykB4Zuprcm2vvxKERV6tudjFQ\nFuupt3tzE4EoAkNDetlgF7/hi8+XycW0lP00HFn/GvlvrUb6Uh5LUGepJJPD\n8tQHMBAOTnLao4MERsvKVIhxnMNND552NnQoHphC83tU6xQ8cLWfl1J/2AEn\nM69X6HstlEkdH1eUct3YGSKe5Pzi+PSBqNHc0kOru48XQTZtKrBeG2dIALWA\nyATFBvvcLdbkmEC8t2pDG0yqKIscXo8X2Q/whbTghA2Te1QWJIz3aj2xJhXS\nO5DesNntxC34u6nYCDLD7sDxwJ2t4nMWmfoMsNtfpgjzjtGL/uOTI3yll+Jp\n5MxI4yCF1jl5eMkSROagP/ETVkFNxohWWh1zNXM1+KunoTvb0mGpbtgL+uiV\nkgYYNS3MvoP3j8nzgQOcCGrrgWRUgAXSj+0e1LXU+GPFcFHj8GnoAHsNWnBG\ngAQ5\r\n=vc3Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDdiTL0v6WC3WSggoPLK6Ygtxkv+GWjtgrtie7RRr0wAiBeC3Yp2T3pHPmNFFONN9KWeHHtQiVow4mzqU/ChE3l2A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.bc9a724e.0_1626201771401_0.31294365300431504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-select","version":"0.22.0-canary.7847b83a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/floating-label":"=12.0.0-canary.22d29cbb4.0","@material/line-ripple":"=12.0.0-canary.22d29cbb4.0","@material/list":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-floating-label":"0.22.0-canary.7847b83a.0","@material/mwc-icon":"0.22.0-canary.7847b83a.0","@material/mwc-line-ripple":"0.22.0-canary.7847b83a.0","@material/mwc-list":"0.22.0-canary.7847b83a.0","@material/mwc-menu":"0.22.0-canary.7847b83a.0","@material/mwc-notched-outline":"0.22.0-canary.7847b83a.0","@material/select":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pOLklBT/tcYlSZkOYpytKXfMNtYuCcKX6ekF1KgNn/a3xYfYf9H7MaljvJV4n0mmnH5O4NUFjTcQ6bZ/dvETmA==","shasum":"b0af7216fe601a8865eb21f83c0fd57d5724214e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.7847b83a.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xygCRA9TVsSAnZWagAAdiMP/jjLP3KLaekZGS4iEWaE\n//4IXak5Jr2CwmG1FJKX2m0RKuVRyzR81MOOWuBuRccwmk+YwQ1zhgVggLjd\n+esHlN9PTGxENZOyc7RIb/iq7gNiwETVk3o2h76Hya8wZprcPWZYPY++bYjX\no831QITXon6OOnIbx93uBV9k58q6jWSsLckfC1f5H/uJhAGcW1JX4e8gz8WP\nj7pkNR1kQgUqj7bsDFN/J7ORLvAH27AdYC5bTyQRVQGTOHh61UEsZOHNBCbp\nbNn/ZM+0LR9516KK1QY8HqA9Iln8TaRITA823aNuv76TRaMX8+2lV8sdtmaf\nmqgzuLgJGc2VUFlZ8FUkql+BfDjDuJdmDIzYVVnykG4HGdQ4wsWbOYssnJsM\n1kPqdsSShpPWJ/Dv6xEvKqj4DibtgJIHeRioBZs90Yf86P+36IZRGE7xq/Ny\nfkxcB3GlJjkgMCOBXq4NJdKyFl49xk3MGhgJ0Ov5Cfdqqas1i7xTxwDEV/Zu\njmwBwqjLPVXsV6k0NHgFoL675dr9A5FzgNGoi3phGVHkJKNFlNvR9Sf7ORbJ\nlgb0VaS7Csj90oCZ3W/rFSTVgowqRqt3vULuBV3RZYwJuLrLgtdx39BXjVri\noUtKvBUzRShO5hk8SxtkC91DfWz9Bk2EipPyU2rFq1c+rpB7bsT81p1+K9Vt\nlgJJ\r\n=lIjq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5On7zQBXHhsP5iRx68s3NOZiFUdnQayMR76rz9QOBXQIhAL5YohWBX6M55w1Jk6pK4QQ/Wl6odPubNCIeCqRqma3Z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.7847b83a.0_1626283167735_0.5010221109523039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-select","version":"0.22.0-canary.8cba18fa.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/floating-label":"=12.0.0-canary.22d29cbb4.0","@material/line-ripple":"=12.0.0-canary.22d29cbb4.0","@material/list":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-floating-label":"0.22.0-canary.8cba18fa.0","@material/mwc-icon":"0.22.0-canary.8cba18fa.0","@material/mwc-line-ripple":"0.22.0-canary.8cba18fa.0","@material/mwc-list":"0.22.0-canary.8cba18fa.0","@material/mwc-menu":"0.22.0-canary.8cba18fa.0","@material/mwc-notched-outline":"0.22.0-canary.8cba18fa.0","@material/select":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yk9x96aB2/kL6Uo7Kpxoaxp9kvwn0AIUMRxOpfcKy8SVEbS9mlnGLOV59ofAOuyJU4W6R/vF23uyVR16YDLFYg==","shasum":"73fef002aec488c7d42e831d6d72d77b758ac5b0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.0-canary.8cba18fa.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70itCRA9TVsSAnZWagAAoxoP/jUOtvx0H9WiwKmejWjj\n/yeqkfk8gsPQirqnFa/UJeOw4z9j6AEFMAWLOK4VEwp01epRlJLM1y2tphCS\n2GJe1y6Cz5kWh56NG3OE0UlrJ1qLTc4FxwSOOHoTxX5Q+X+FIvn3ViSIwUa7\nM53+B1ZQnfi7O74kDdDRzakPz6SWVmfgXWw3OPzQRy2ba1GxwzdcXpMhyrC+\nH/P8aYQIpXtiFtrjqrRtWqP6li12GG35sgxvx8O0vdQYYpVk0wAb7S5E0kZQ\n662/4i2H/68cky2RckeMvdubaULda/P5WjnWLcXVmWMEnmBb5exrAGiCt/7C\nVRBCcuGxVB+BmdvcooIR58AddpbZ8UtfqzwkX9EEH5kqVOWzI5CRNJlXSUMS\nrzPdZyqU4HvF0qYPlZNCOopf7BZ6NRxzQH/5eP8JNSO0S09gnciiIQpDVJrJ\n6VktQNqNUccco6BjKkYC7N1mizVwMZlhGEoZgcyqTaeEmZi9cvyfYkOP91b0\nAwnc1trNF+wjhAORWBRvy+N7Sf0Tup+TsMHbWZiD2LvOYI7T4lVPasQLU11U\nqW9s06viknjsqCVOQuR61KD6o+67USlUTKF5ksEf+jbgqX89C8veFsnv7lYa\nOfpcZbzQKubxVjd8zwzdw+h5gagWYQAVR6EabNIeLlNkXbRbQNlT9eVeapOz\nEZPI\r\n=vtjt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPNBmJQfNfMwWK8QZMehZxUKoSW+l6a8HX6xKlK2OK5gIgejPNGyhDlxRKVNCvAV7ZF6GX63nqjHR4YyhJwhl5sx4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.0-canary.8cba18fa.0_1626294445227_0.0868780759767287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-select","version":"0.22.1","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/floating-label":"=12.0.0-canary.22d29cbb4.0","@material/line-ripple":"=12.0.0-canary.22d29cbb4.0","@material/list":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.1","@material/mwc-floating-label":"^0.22.1","@material/mwc-icon":"^0.22.1","@material/mwc-line-ripple":"^0.22.1","@material/mwc-list":"^0.22.1","@material/mwc-menu":"^0.22.1","@material/mwc-notched-outline":"^0.22.1","@material/select":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-P5o2DD48AtEpr+ZqbFlQ04GgSmcbhOTdQEeDBkDAxSsuErXQZgzY1aPCXlaDI0QzQ/gNP/13b4ejLqstVp9SQg==","shasum":"00dd6142637a1a201471ab0ea9f8a78a378ac974","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.22.1.tgz","fileCount":13,"unpackedSize":203255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rcCRA9TVsSAnZWagAAVj8P/iOpPbu1tp44LdylSy6C\nCfLaoTt7B2dcvAQWFdDuvlPmoHwxECTNkY01l2+LHACuL0NC8YEBsGTMMPMR\nHw3pEiUYiGXZ5QM0O1Og/JsrVfWFyfT7YRiBk+TphAauL7NgGinKXhyKibyR\nkI3jhj9muvRj15JVaFpgZ7qI2sux7YuFzkOp9jEbhyuMgPjTSrSuXblYTHy4\nwZAG7HLVGwO5+9vkkv53pmryKYRvuRgPqwfNwGJ5Fb4+IvSnvuL5myF7zdmR\nBAQFXHyv4Lwslb08kVSvPYTZ7KlluFfScmt2iZ91JTBqfGZHhPRpEDrYJuIg\n+idmRp6MQZpobb2CA/4wG9cH4SZxFcDk4mISoY2YXVDV1arNlBvVFl3dsGmw\n3mzTbe28gyj0YY9vep4d2m3rTOEGXgyq1VujDoVAz75GQC/1V8T0ikS6fjnQ\nsTt2LEdNKt/5dpsVc2ZFNCVy55TOAhEe0VOFMUc2UNPatN5u5DHl8fyuCsiw\nUYdFvl/iIEHJiqt+R26B+Uup3PgTvDhbTEW+RN3DYPuGdwuH6PVoR2uISF/g\n4+PFC/nKphBnvgZIS/GTF3et8VPjWqxaLT3bO1h7+MQc20tZoO16H9YBvit/\nXWTa60fcOKSx6aKJrD2FdfCu4/E8bpwevreNz8YKjjTbbJpQThlhOVee4KmS\nSzTU\r\n=vyD0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDD7XwBGmJzWIxqbcsZVDV9JrQkqfQTK9ePPB1RcgV/5wIhAPxhfRboefOIPikxtW4/2hY4lEvIox/TF/VjfjD/a5Ir"}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.22.1_1626303196004_0.7316820373544601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-select","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/floating-label":"=12.0.0-canary.22d29cbb4.0","@material/line-ripple":"=12.0.0-canary.22d29cbb4.0","@material/list":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-floating-label":"0.23.0-canary.fbc09b4e.0","@material/mwc-icon":"0.23.0-canary.fbc09b4e.0","@material/mwc-line-ripple":"0.23.0-canary.fbc09b4e.0","@material/mwc-list":"0.23.0-canary.fbc09b4e.0","@material/mwc-menu":"0.23.0-canary.fbc09b4e.0","@material/mwc-notched-outline":"0.23.0-canary.fbc09b4e.0","@material/select":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J1rgGHRb0JoTsy2aChEpwmwMUW9g4rD74W+d3HCN07RHOIgance//xzxYKbFuUAyfnSOMVxL6hhbReGxIeVJMQ==","shasum":"5c4686e93ce2f1ee48794e455070956831e9e231","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.fbc09b4e.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72tACRA9TVsSAnZWagAASj8P/2SCP/02/INfnQ+AdhY7\nEKhsEB1dtukzcIHfQPOkw4l1GFIi1N4dyA98nsQXlyV3kWls+L7El4VzAbxL\nu+277cnVWYaAYNU6Ksc82ms5Ypupv5F/6XRNkhXEU7yZI/UTwM7vTzN85q8r\nYSnUgQWTYfgU1BV8s9dF5oQw6N9M6AFEsz1PMpSO5vzJia2XS8/wAhI9gBLA\nJ0NpZlOqTeYkIDzBWWzNUqeRHFm80e0n2WyY2+SHsKCDEDCNFSzR5RKQqL8C\nVMwgyGwQ1nDUK//Tbpjun1tqzwpE5dH1ICwnkP+hJaRbBe2/Z24OiTFSfTMk\ngVFtoA8qdOacIuCC7sSqZuiwGWXvqAfbItwzP9gHcveUrn+jlgwUYEEUeKpJ\nNRtg+BgZ/vSUVgHnS20pYBvYRyjmp1V/kuGiBb1MU4Ukw2NygLnO8gw1Ukr7\nnlPv1wV6WQTqo6g1ohZHv4vakaPi3+3+2sX9ckdu//aIY3ylRbHUs+LhoAvt\nV1c0PrX2jBbIi3PoySKqR+G4G3wUNMcjKQuhUbZn+z0o7G6NYm7q9UpZJ9q4\n4LjgNEH6sZWo/gnB2kXNpbOXhK/ObXstVlV6PGSMv0Hg+X0H8Cea/3FZepv0\nCxNOXhSjGVs0m61Ak/u3BlP9F5FxRwCrJ6faj5N99kFdtcz/Vrq2AVhVmpj9\nWGBV\r\n=IiX6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsMwlTbHHc0sb2UuUAEWbvf0meju9BMed66/FFlQN/OAiEA1/ux3sSRMgM7RNa6ZNfgH4Flmc9+e6V3p/6efuNJmbM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.fbc09b4e.0_1626303296481_0.6946179995665944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-select","version":"0.23.0-canary.73e9f83c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/floating-label":"=12.0.0-canary.22d29cbb4.0","@material/line-ripple":"=12.0.0-canary.22d29cbb4.0","@material/list":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-floating-label":"0.23.0-canary.73e9f83c.0","@material/mwc-icon":"0.23.0-canary.73e9f83c.0","@material/mwc-line-ripple":"0.23.0-canary.73e9f83c.0","@material/mwc-list":"0.23.0-canary.73e9f83c.0","@material/mwc-menu":"0.23.0-canary.73e9f83c.0","@material/mwc-notched-outline":"0.23.0-canary.73e9f83c.0","@material/select":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EoUsoBZ63cp/WHugZMDVmiwvI1qGvmbf1GOGZfKhfmSewfpv2at8kTOvsR/exFPNgAnuoWlq/QefCgBxmH9URA==","shasum":"033ffcfb53f3e7235084cfff104f7e508c2fc742","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.73e9f83c.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0zCRA9TVsSAnZWagAA2BwP/2c+0EoUNIuBrNesluSy\nB1pf4iHk5Hh95WIROAWJe64CB5ZvnqB2aUyDwTr2VJFngpgO0r4tqXdtxJi8\n4Q87CuykbCaZJQ5ipFnGvjBcFgxZdzddfyQuNrySEoUTwEe4rQHtu+KvTbEC\n+RuzIRqL0uCwdu+0Cz8FIrM3mkxeTCl2nc13lurp0v+fOArmTAS2Ixi66sLt\nD4qUagsXijFRxhS2N+5qgExFgTlXtlWoQOHiSxcaWmbQpvC7d9x7rBARE4yz\nrsh2ZHIE199Wb+X6HXCF8nidB6o5vmOIibeqDWnAtkl9MPKFIfYfeziMpczi\n6jmfuIJKukik53nWCA4yh4PZY6ntkA6/i3nCFJ+YUeMdrfu5BiZVPkwWnn+c\n/YwaUkV+EPipgjVQ+Ank6U0LmyoJ690nDrBKTBQDH07JRp3558gGWo2f1nEa\naGnyDRo8DfN/SL3AMIPlW1M/SjEtdULlfDW5JyhVU6Eh+pt7k74KrQLKQ7tL\nnt/93Td8JYh/GBnXsX1KKIHrghDbzNyi8hjXizB1zU4nuYc8SjP+/htLrSUV\nxc/fK08bX6wHRataoAwJf3HaAGp6FDPYsT58moXBSgCXP2W4bjOeV6VWS8Av\nCSrnrcSkk5AYpdb6Ja13GKlEPWtrtEvWGweRSgfaRV86O1cO/jUO/PnRzeg/\nAIHo\r\n=bRD4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9bVJgKV5Vo9GQPmeW9/d+sLOcq2gMWNgrIMzCgkusngIgQRsNCPrZ9nKOCWC4Iu3Jr9y+nM/t/+5G+7KYOC+ogvE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.73e9f83c.0_1626381619607_0.7068453601049571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-select","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/floating-label":"=12.0.0-canary.22d29cbb4.0","@material/line-ripple":"=12.0.0-canary.22d29cbb4.0","@material/list":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-floating-label":"0.23.0-canary.cc0aa7a9.0","@material/mwc-icon":"0.23.0-canary.cc0aa7a9.0","@material/mwc-line-ripple":"0.23.0-canary.cc0aa7a9.0","@material/mwc-list":"0.23.0-canary.cc0aa7a9.0","@material/mwc-menu":"0.23.0-canary.cc0aa7a9.0","@material/mwc-notched-outline":"0.23.0-canary.cc0aa7a9.0","@material/select":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KR80s6zsYPfhwUIq1XvO0Fo6D3RJHXtxRadxWmORpw3+mQZl5wzlC232BphEdqpnryREN5CfKEnWsXPHi9jgjA==","shasum":"fccc42d4e7058715c1cc4df222d0108bd99412e5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KLgCRA9TVsSAnZWagAA1X4P/jUv61yyXnJqJQip64VW\n3EhZcyeWvP0+85Fd9IFz/FqRclTQlLR5Ku8lwCahYdxOqHBwOWGPbvcPgjzU\n6px2MBIglKxcZyWMBvDdmryDv3PSRfDP0BbNB5GHTdYgVhWGU43Y4ivj14CI\nmGKEl0DI0n5acp+K+9s1Cc93ejgicVkh3/Aeje/RaU9DYC7gCE9wAnnaz2Nz\n+w2V8vbQzIyzqegPuE4nat5KBpUi8U0QW3bBCjGtFSsPvr7sH+ZiSjzvcf5a\nFRD2Dem7U4D0ylxJshjVmzR4blRS+Chh2+1KKzqFFx4ANav82TFXLnqONwzA\nK17pHXdGbldlLVgF0QNA31oa7Mmez3M00ATA3Lf2x7KtsEAP10SY7FnJZHu3\nWHS4QIJzSwNAVLt41IXKZ0IlgK/VzhAyRtX50eFVMLav0r+plYdbE+2IoP+g\nXn+dH9f3FFovJTLt/yRW7sIaxTQyvPFS+35PAfzvYNw+DqoYCi1HmbGLaH9n\ntdZ3u9KA1+13OssPIoeQQNCjfHBw4WhNKXl0EJ6H/bfbtK2v9iESVl2XO7Cf\ndDO9U8Xwz0r1AkcTB4lkyvUMXEBhGK1lRXwytsONyjIhxXhu4oTX7ZxQhS12\n/dPMQwkzbA2q60tIm6a6NsLWMatGDIi/MaEVWHHtkFMWwbe4cN+fYTGRZMsc\nukx1\r\n=8HZe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADAclZVAF3hzkDTsYM/R+GhU7ysyNznYxoJZ5UiHBliAiAYj88/j6jETfWKRdYWODa9mE+l/a3oiIRgMVvlNJormg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.cc0aa7a9.0_1626383072381_0.7532002407821237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-select","version":"0.23.0-canary.a8fcac45.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/floating-label":"=12.0.0-canary.22d29cbb4.0","@material/line-ripple":"=12.0.0-canary.22d29cbb4.0","@material/list":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-floating-label":"0.23.0-canary.a8fcac45.0","@material/mwc-icon":"0.23.0-canary.a8fcac45.0","@material/mwc-line-ripple":"0.23.0-canary.a8fcac45.0","@material/mwc-list":"0.23.0-canary.a8fcac45.0","@material/mwc-menu":"0.23.0-canary.a8fcac45.0","@material/mwc-notched-outline":"0.23.0-canary.a8fcac45.0","@material/select":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lXcDsKN6PAbVdtxk4TDc2AWZCdfxJOXzDI+AUzO3DCQs9iaWlZep6o9mXj/3Mu0bmYlNLxYzwKP44iPCvnw17g==","shasum":"5129f3c42c4a51f420a293a34b1f00d1b5fe8f1c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.a8fcac45.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KdLCRA9TVsSAnZWagAA+ycP/AodfqBnIGKkYhyxtYsy\nK0NRCE1zCZWVSEZpn4/HR2RiuicsPGxTLtPoVySuWK47W2sP2vC0tHda7mwA\nnouexVHb2lFS9pXSYzot3YsKro6CP87ViVsEsWBUfc9Oq1OYdbrD7rMLXFSK\n0pDgVYbZHJDlauiU52OAS8JjiSDSNccjjok6l+xeJdfe4KmzKUpaOSR5s0WK\nalIFcvPXGazU2plsUHZiBreSeDBmzn7THUzYLTMjhNTkO1YIpi5SVZ+5scD5\ngPJzkL4YNTx/v+G5cjs+aq+9iKIA08dfuQ4ojJiV4hLnUudJcFSBWE21r/EI\nig67QyRgDSRmmZ91dJqFecSoXjtTFb/65tnCfPl1ky2kzvOw7kzL2PcjrAnP\nVX8qp1yuLvtkXS3v9ugbiZyGw26Ni4UwHcMO/A10R7lTV3DzN4EuArWF2wdZ\nX2PDzOvuZ/z09Ve62oCPs/nHJxpx+c3EzsfUpzTgYjsB8/cxB5Zm6XM7gilA\nIJEJVA98ZlHbZ/4w6EOGP5M2p/XZ4HL8KE7mcON+aUqYXkCyToXHOuaIMNdt\nxYAGdU3z+15+ONkEZSp5A8Cvsh61UOkNdz5idQ3rP/E4celWYPEU47ZIGjyC\niCfEJDhwXaUs5a7Zz3fuItB5h2mslFo5l2aCwDOfjUnfsyyxahnSDL4ckb0O\nUaqt\r\n=RXiZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwxmfH+UFX3Vo67AlhpVhT79b5EsSJPfh7fIDyIWBJnAiBZSdprGIYYzxlkxX7q6CNmEq4YEpl127ByI7z/DYtD5g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.a8fcac45.0_1626384202923_0.02803195524647295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-select","version":"0.23.0-canary.3ca580d1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/floating-label":"=12.0.0-canary.22d29cbb4.0","@material/line-ripple":"=12.0.0-canary.22d29cbb4.0","@material/list":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-floating-label":"0.23.0-canary.3ca580d1.0","@material/mwc-icon":"0.23.0-canary.3ca580d1.0","@material/mwc-line-ripple":"0.23.0-canary.3ca580d1.0","@material/mwc-list":"0.23.0-canary.3ca580d1.0","@material/mwc-menu":"0.23.0-canary.3ca580d1.0","@material/mwc-notched-outline":"0.23.0-canary.3ca580d1.0","@material/select":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-p1WDJ/5J/8KkKsyNGVplGadMydboA6Ahdiwlxkk8lXxgETAdRTdsFZ1ZWXkZXAri3IxX+X0qNBr/t1leBpy/Qw==","shasum":"b4f30cc9bf07f1ae4ab51a564a0774a7b8cd6d0f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.3ca580d1.0.tgz","fileCount":13,"unpackedSize":203392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LECCRA9TVsSAnZWagAA+jgP/R1oafhrYS5z01kJJZAv\nTac+/rIKtXxPrxWstEllYjSJm9O8OTnAZGDrF9CdVpngjHRKRrJJRSjFyv6x\nIDC88kXbs1Ez3aldfKuzpu0BFYLWdqnvFWKPP+MKB8jHCXf0qpRwW+1L1sDF\nFAAge/vhL//1FREZWp7/xLCZYsd7DKmtPbUHEY5P/MD+tc9Msy1ZdEocOctW\nghq8QglhkvzfXwRpKNhED0PtuhdnrVOTD/60LMhakV5s+7lFJhLrk2HJofh4\nzwbfh2H2hGgRa3HGv/s7cWkgh7Ioqj+cUyvsk9d0WulbB0VsufDkRKSfoAnV\nsMMr0f93KdLyaeq6KcY3akaDrSZjFfEX0uVJ3q/Rzez6Q9QPb+uwu1CYBOeo\nq5Dy0B63rcbUI+ZBlK0/oBBwEn7a4lVXvNl3fAk7frp0Hdza+A70jSjeCFpG\nskzjBINutQFvis+E3RyT8GbdrJRwf1ywl91KS/ASCIX80iDQwoehccx3Ktj/\nCVQr/dmfy3Mly4XSwz+Boxtqz0qkanJ6n4GhRx4Q1MpmX/nIk8rYh/nh4ack\ncOQI3sDE+RV0etzPQJaCrd0aTkISEvFCA9zJ1CBMGSZYD919QmFOole497V8\nx3StCpp7KFs4s3pT4c1jWUOYhzMmRhwE4ZHjD7J8EVhEgF42P9/wZLsOje34\nioXq\r\n=QNdD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWngn6YCYbZKWCazZBaDT9aHGwMhwZlanUggtXHdsVNAIgbq0YYkZB/AFV6X+85YPXDP754khVqUr0x2ir65udJjM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.3ca580d1.0_1626386690042_0.10004402291981163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-select","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/floating-label":"=12.0.0-canary.22d29cbb4.0","@material/line-ripple":"=12.0.0-canary.22d29cbb4.0","@material/list":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-floating-label":"0.23.0-canary.9e41cb2e.0","@material/mwc-icon":"0.23.0-canary.9e41cb2e.0","@material/mwc-line-ripple":"0.23.0-canary.9e41cb2e.0","@material/mwc-list":"0.23.0-canary.9e41cb2e.0","@material/mwc-menu":"0.23.0-canary.9e41cb2e.0","@material/mwc-notched-outline":"0.23.0-canary.9e41cb2e.0","@material/select":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hn4M0m4n5JpTq+PTX59lFIRmyj5QDBXQg6SbSofSvrS2eHd16O3Zz+mBBZjiE76mrfepNufhSrRtRBuF7JSlVQ==","shasum":"3fa5ddbc0b18874173eec21d7c4468de89119e05","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.9e41cb2e.0.tgz","fileCount":13,"unpackedSize":203844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAvCRA9TVsSAnZWagAAQEYQAJkFd6jL0R9lWHfn1MFg\nx1jUXRcBphThIY0KUGTvkNOm63DvWTTVxJ4mprlKBwwuPAx5zorLUsmx1ng6\np0ra81Mrwn9uyO2NMlFr3ourqeQKQO2/vIqmbkCnOCJyrgLDRFW22yOlCaR3\nZER6greXlmcfjTabBVaLQkOSdUBkIDNkgKpi4H2A2VOLFU6ZFi+BMpuMQH4M\n33qIXvINCMal8CUAM224DBw7hvZHEHUWKIRfJ1PUh2oJhVdXHAOfW1Zs7CYM\nbSDHn5d4l9p17ImovD48yaVZu3FAT2Z4fYf6uPGHb/mx88+O6g8+E38jD1K2\nznCTvs6ctPi3uwgB6Zws8IBw9V+tY7o+nBQ0u7rnx9a2bILZ/MrI60tYmjT2\nIpooN0qFwV/XV8puUU/od6TkZAJfQV4pPy4oNkFNXMzXwjo0+q0rYcKBwIBl\nD/2TPmOptTJnHHCTX06ypMD0mzAMZtXssHPOs5GGvB8Hzl3MxnSWG7ydMO/D\nsI7eduHL9vMIxr8dnCm5iSEfY3gYGiIb7zpDTA3vSsMM61ujOmitERnElXyv\nJY8KfI01QxKBD0vfRmOSnR6sdFKy+Brv5mQPnxhWxnyoo837rYw8r/w5nqte\nmjh0520tt5UQ8730DVnD9zxSbtuqwkb1V5D6uWf8QJyxH3GV7CPFDfbK0f0z\nt0sx\r\n=T8Yk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOx8b2YEyl4Sib6YA+RypJo/H9NV6EAZOJykXxBVD6HAIhAO4xdHQGxCu/sJxAZ/GyMf0B+tpZ9BkB1Nw6E3UCXqq/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.9e41cb2e.0_1626390575101_0.23924789419287396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-select","version":"0.23.0-canary.c180db74.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/floating-label":"=12.0.0-canary.9f68a932e.0","@material/line-ripple":"=12.0.0-canary.9f68a932e.0","@material/list":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-floating-label":"0.23.0-canary.c180db74.0","@material/mwc-icon":"0.23.0-canary.c180db74.0","@material/mwc-line-ripple":"0.23.0-canary.c180db74.0","@material/mwc-list":"0.23.0-canary.c180db74.0","@material/mwc-menu":"0.23.0-canary.c180db74.0","@material/mwc-notched-outline":"0.23.0-canary.c180db74.0","@material/select":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UmXzsaGjaqv3fpH/stbU6Mq/wgkDQypD2+yOGhgw6kcatbceWLsbpLOB14bk412UABsb4bZ7ToW9kq5JbtnviQ==","shasum":"8de017bb01a86efd96a115a46bf6954a4de4a35e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.c180db74.0.tgz","fileCount":13,"unpackedSize":203844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cEZCRA9TVsSAnZWagAAnWEP/0YWv4VnnIRjfB+yPMO7\njOGbWZJkmwYCBpByZ36WFwwvfGNAcETk+hHz42XaFpQz7VrovXNWyr6mgaj7\nr0Vp5oU79o1tkwnyFdWrdFUFesnHgqJfNN1HUXoOZmBQS2Qe28e2aUiYGEVZ\nMRF+goSue7CMf4J+BH9siT4vihZIZ9Yp4/P6m5yBgs/Lky8ziOWPgJw38GXI\nsgnE13dg9W56fmInGO2yb1DtddfUpg9h5tn9CT8CZVdURHy1DoHhbNkv0a/e\nG1zE1VWruxeX6xAodXEOJG6UWDMzlvq9kZqgDvoOQDITF4d43pu9Qq/HDjtL\nH0v4+pP8nwTcIEGySW+Z/JqleCOvPp290MwBPqWzJfR6okiiX1p3shufLGMu\nEy9nIRhAB70fse6tb9RjNap7+aEVNK8Cbm2TY7XqLt/9lfHjwEQk71W7l8oB\nYGPxu9b/YP+pup6+TGy/+TJvPAeLt1k84UsjYiChNtI1CGaWvofkMDsy4U2V\nIeyj1VNSqb9nsb0McxuDv0D1+IXQxkECriGvFMTUNitQ85lMai3EQcfH6Ck1\nlk2oCpN5IUKom88OvVfPNZmzmCgVTAUKPFZupi41NCWbNxlePcNulB60YXcQ\nETurXQLBOoWnEtof8uXqhpa6iZM3txIxqnJ7O4qMO6epK20yilmzXv2xvb6v\n+2Ee\r\n=weG+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFIqIKcvLo6utHqsAuOnOYswXuxPnqO2eHCq2NFroH0PAiB48XPvJFCcgwMcEXkZrnZx5K+TV0J99BO1d61hyfifkw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.c180db74.0_1626456344915_0.6296511924533474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-select","version":"0.23.0-canary.0d0a9267.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/floating-label":"=12.0.0-canary.9f68a932e.0","@material/line-ripple":"=12.0.0-canary.9f68a932e.0","@material/list":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-floating-label":"0.23.0-canary.0d0a9267.0","@material/mwc-icon":"0.23.0-canary.0d0a9267.0","@material/mwc-line-ripple":"0.23.0-canary.0d0a9267.0","@material/mwc-list":"0.23.0-canary.0d0a9267.0","@material/mwc-menu":"0.23.0-canary.0d0a9267.0","@material/mwc-notched-outline":"0.23.0-canary.0d0a9267.0","@material/select":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eNMutGKzMxPy01oAKv7YkDpnr3k3QEg8E8eFy1VzkuFBX5zCcdYKl/HVIyqnRs3v+m8WTx2B+23QtXvn7HzcRw==","shasum":"4f86798e5dc59ad3f9992806de754b9ea9092811","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.0d0a9267.0.tgz","fileCount":13,"unpackedSize":203844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cinCRA9TVsSAnZWagAADoIQAJXUJOPhVf4Txr6NBrpt\nqWESZTTOgN9nsVqdpHEJevRDWnVLDXG4eCIgiZZCEpK3XgN6GujqZbT30fYl\nhkhilnuXqI9jybXWjgMjjKqZzHW9HoeGLL35umEQg1aDp60YPbmqS8gXgtFl\nrIzW/PE/KxOeqUe0l5FMLamhPkM5qkseY162KmwnXn8j8a4d/Vm+W+v90CHt\ncLl6cr1dlRjKgzZsoSpsRSk4qaEhC+ikLvl6b6O7r9gvM4ZBLLgkdY5Tixig\nWPmMhexV+rZQd2pQtu/RWuJgufGwxLpepCYSQbh5Q877T9Shb31/2JKeXpav\njkDE9J8OxAljFM8+HxdVJEqBnTqLOn/qf1pLN011nyjEdBqZsdQtLE7OFBre\nhS3o1tKaQXjWwbrtMfTHWbtYZVGBeI2qJsb40enp5KPMMil4qYdlaaDJpgi0\nYTF3hIzTbYm09VlYgyfe9y9in6euyiq5Cyt5do7N+QkZ/OEJ3w+QczYAEgzU\nwHhmgsKQztoSjYtVUEkF9e2++KyWPGWvK7/y7vKIS0hRtuxV5mCEsWkFA6r+\nET3ZyT3+xRfQ0p3GW/VcenT/2xz0J/k3h01uGqHBOCKR4IxlqgTYusQFx86b\nd0+YoZZXlroUZn4ykJEge31fsyF+Tqp/DiNOzG2vhhowrf9iVLX0mLgYeXlo\nQXRH\r\n=FOqZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSOMXN4458O6sCIoX29mdrXqiYdnEyeBWHhSJ6N9835wIgC6/9t5fIBKfNwHYY5GJW6C64X/kbJrCjuWQiHTFbndI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.0d0a9267.0_1626458279092_0.7407709209313942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-select","version":"0.23.0-canary.d234ec3f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/floating-label":"=12.0.0-canary.9f68a932e.0","@material/line-ripple":"=12.0.0-canary.9f68a932e.0","@material/list":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-floating-label":"0.23.0-canary.d234ec3f.0","@material/mwc-icon":"0.23.0-canary.d234ec3f.0","@material/mwc-line-ripple":"0.23.0-canary.d234ec3f.0","@material/mwc-list":"0.23.0-canary.d234ec3f.0","@material/mwc-menu":"0.23.0-canary.d234ec3f.0","@material/mwc-notched-outline":"0.23.0-canary.d234ec3f.0","@material/select":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vzndgGYzSOEYYuo58PY4yz3AOQVDv5KpII+zQ26Ou4DKksDEFrz/BqguVu20MaihegRx/7ddu2dqDre11hkL2Q==","shasum":"ecf1c543791d4f2f32bf94484ad45b1bfeccc309","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.d234ec3f.0.tgz","fileCount":13,"unpackedSize":203844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cseCRA9TVsSAnZWagAAuAUP/1mXtt0yW7bjD8dgCr5x\ny9K/J/LlxB4Ue7OXCjkhste9gkJXPbmgPcCl4EXC8JEHBk0xBDAmLLL3gO5g\nGmIbSRFVbsooCe0BYepswLuKoyXWgAnpZtiIl+m+5ea4o24sbzAlrraXqekc\nSMjDPiDyvRYxtIFuVjRX1ZoTaC4H2H16E/gm2frbyp7jo0qd/pTKSwop8uZR\n12gpP24NOsovZ9cIMmT8iVAUlIdNj4pOcNJnRC8RgZIVJ2woyAe84sPDMIuy\nOQGytKclBLJG3WSE8vf1dCyPGqBzPI2zzsHmfpRNwaSzJ4H8Ydjqa6ac6Lct\nsKMFG+REtvFc+4BilYtqyWBSQyWGNp9ktQtHeArrgSjffl4AU4Yfx33REqjv\nHxU3kfAV9CoeIU4F1RG2ztshBzIW0c9FeF2RPL9q+9vF/VbEGl2sb153Zbj8\n3CL3S/RIrdCRUw8zvfATrZM8qZq4ZQZFh5624HomkkwmFx3zGm6TNKuMcPHU\n0l6R7iXj64/svNS3LB6M4nSUVz5cMXXbK1He8GW4hyL7npeEp/lTBEP9Xer7\nknBlsIFkwfBO53qHetF87LHVZIUtTSGCkptGnEfJ7YvkgjprvzHkGCijfAAd\nYAE+44tvEUxY3oCxQ6Kb9ohZSU9oKLElMOQKtV7YDlgZ+kqlZTCMoirC3SSs\nzwxa\r\n=p02R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBaUJzTrxLTEgYTKjpuKghh6S+ZH2gTWRTdc/qZKxcknAiAPlIozhMrCsMVgU8u1AuCVFNDnIGnyvNET/TLI6YWHWw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.d234ec3f.0_1626458910592_0.4190782440269005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-select","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/floating-label":"=12.0.0-canary.9f68a932e.0","@material/line-ripple":"=12.0.0-canary.9f68a932e.0","@material/list":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-floating-label":"0.23.0-canary.5cd4bcdb.0","@material/mwc-icon":"0.23.0-canary.5cd4bcdb.0","@material/mwc-line-ripple":"0.23.0-canary.5cd4bcdb.0","@material/mwc-list":"0.23.0-canary.5cd4bcdb.0","@material/mwc-menu":"0.23.0-canary.5cd4bcdb.0","@material/mwc-notched-outline":"0.23.0-canary.5cd4bcdb.0","@material/select":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MErENv7G6GWoEuqsYSB9BMgjmLHf+MZi76hVInI+bhYKLiDqLQmaXvARp3GMtrZL2B9XWON1yYR7pbFxKC8ppg==","shasum":"88b0e1488921b60884860f8fa2841f1a63f7e2ae","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":13,"unpackedSize":203844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fZUCRA9TVsSAnZWagAAUdIQAJ3xPKu86/UCeCcQT4uq\nOv3Yaqd3SgRs2J9D2A7igyiLB0eEXqcvBx2Zu87qKTi72/UZPN+/VOwGTnoo\niUeBRemiSdUs7tRWFuTf01a/J8zuUmiIyRcGdn6byMVMSWB1dQSUUBm9FYoG\nOS40a7fFCqxXSJRNH5nfo+Oz6QV95MYg5xHXdOIj2El9hIRzhDeVcS8jmgKi\n4mz7mF7AmbukEvvQrsVQPgoUYq35cwuOGn6xQHwvgXItQHFxDjpdR3eTNLhv\nW6g3hEIYOi5PZsVMBwyPt/cvN+qOMy7ivShDzX2I2GuLpE+JbaxeDDoSvAGC\nVp5Q9DFGLQF1T3EOaD4IIP4Faj9trv0dSYrUUlPkHjCupKVLFYj2C9KBeetd\nk7LscD/B2ED5OM4o1rWowQh32ozoLZhH8zK4O/5EiVFEgMn8NG4NT4mgYP6l\nxURoKjjPuDXNvvEvYsGLTGGzxZavHT8aY2J/QpOaPsPvA53asYWG5ZWOaZCL\n2cb5kX/Blm9hcF6SbKPsYgUG4acB5DuVjAzVMracYQhPJhzrR1woka5DOwST\nR+k7cUoDDUi8S/iM/yHm2iroCNrhlu4YROPe8CQP3mm890DhDSYl+bO4W/CA\ndoSgbmg9wblREYyq1dowgK76HHGBxlWNEL4cxndOlwIe8uiLb7eEtyYwPMvK\nqdt+\r\n=1QaZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH+Eu7q6OXVT7m3Dco1YrUlC9iX1eOiTt+Ms0A76HYmXAiEArL0sCqkaTrHLbBk1psebKfjDwBkh3/W0t697OgJS7bc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.5cd4bcdb.0_1626469972390_0.9320775962061219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-select","version":"0.23.0-canary.2b133cb2.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/floating-label":"=12.0.0-canary.4d95812f9.0","@material/line-ripple":"=12.0.0-canary.4d95812f9.0","@material/list":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-floating-label":"0.23.0-canary.2b133cb2.0","@material/mwc-icon":"0.23.0-canary.2b133cb2.0","@material/mwc-line-ripple":"0.23.0-canary.2b133cb2.0","@material/mwc-list":"0.23.0-canary.2b133cb2.0","@material/mwc-menu":"0.23.0-canary.2b133cb2.0","@material/mwc-notched-outline":"0.23.0-canary.2b133cb2.0","@material/select":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wAYgGf7nnsiGg1emLvccWkpHJ1zD42rH1NaBjBGPT2iJfpqwjwctosc56/GXJAdEtJYWDLHPyuwODGlnpGXr8Q==","shasum":"ea2fe81a3093c0f74a7aa0ea58e545e624f0533e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.2b133cb2.0.tgz","fileCount":13,"unpackedSize":203844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gMYCRA9TVsSAnZWagAAyC8P/R7/vHEo2Vc+pnYGCVIR\nGLVBCIdXqmbCzW730BybCVg2zSobJvLGQlfXK4nPWmrGe5Z7nkW+p5CRmVAy\n9f3MYQxMJUQduOjhsE0SCQ/Es/Lccncgy3CCLfE+gMT5f4iQ66FYxDZ2XsUt\nrP++bXdta28kjnDMHc70LSOTGHfX3phZmHFfi5C3CH6yVNulq25Q5KRG4u5l\nFD6jIIcccpMGxIPxMwOCMqv5tjX164jmoR1tvp59URkpndNNGzaLvklavS3q\nstKd3qNv988ZEF+wT7fZF3L9ntQkOkKiVtEagk9zYs5TlYAhUCRa/k5tkBvs\nWdUpjkIdyYDy+W6DwYl0jnKOQX2YUNtlVU+BZen2iz4d5i+Ttc2LVLfpxYvW\nNEB6+UjpC19VemrqiNZgyhJx4VbgMav3R4Zccevk/bUZYzOy2Lce/GpospXV\n3CGhdFr6mm64BeZOiwBHIrL7IabGQFKORWWQ2G4h1z5u06l8JQ80mdEhdzuh\nEV7i0Xvp4Ka6Vc4Ys8+72WsmyouzcA5KKy6d82kfvETFsk7ROEESW8x9cJdX\n0H+IJbC7uvECG7YdNN3TwpdFoTSoIuv0ACWBgbJ48mmyb7zUv4k+Eq/NEikI\nnSAU9cmhwYurfCMuGhoiLUOD/y9FdIPv2xw2UbZP1Mj8rgYHhBYjYlrkEC/i\njE5x\r\n=+FN2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqC/WUM/j433YBSToNPluwEWl2XM3eSbn+aHW+Vm37lAiEAsS6qRGBF5U8PIDYqWJDeMHMbyQ+0ugSmegJkHYqGkeo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.2b133cb2.0_1626473240519_0.24990668954289696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-select","version":"0.23.0-canary.ae4f422b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/floating-label":"=12.0.0-canary.4d95812f9.0","@material/line-ripple":"=12.0.0-canary.4d95812f9.0","@material/list":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-floating-label":"0.23.0-canary.ae4f422b.0","@material/mwc-icon":"0.23.0-canary.ae4f422b.0","@material/mwc-line-ripple":"0.23.0-canary.ae4f422b.0","@material/mwc-list":"0.23.0-canary.ae4f422b.0","@material/mwc-menu":"0.23.0-canary.ae4f422b.0","@material/mwc-notched-outline":"0.23.0-canary.ae4f422b.0","@material/select":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bGZvkT73q0vg4Mc/RtIfL1V7k11hCpSuxR5iIOiIE2miHjjgBW/MYt7q46UjSId/nv1M9IjOlEI5CHQl/R9IfQ==","shasum":"d51244ce7db34119457b9fe8654cbb33c7e1d2d7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.ae4f422b.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hxICRA9TVsSAnZWagAAFMUP+QDUZ4xgyqBuMiBF9SFJ\nFYwriCpt0yVpS+jJPZ1rud3jwJ3nFj0F/74Tp2yOFqCkycDAwqGGLnPJG+b8\nogN4epGtEZqrC6EgN4646xOiZGWvusu46xH4f7UnZ8c3Z9fydZgYHnAdCrjW\nlFw2joRfXRzSXVc1jWV//FuGfWbEZsEjhyATuZAe+hQKyPH7xLZUJA0uhNRD\nNRrjPh1ng6NeccVLOaiRTf0NWG9xH40oyYYx70S/iTn3hJGX1ec0kz4CjdSM\nRJj6/cy1jtRZ79tFPHCgu2yDaCqzHs8kprx+TnBydbzEYcXpeYJmjJIJOXxs\nqv6Yzsnn4F/vetGJGP8z4y5dRVI37I8T0Dc1cHjVV5qyS2g4ftDqn8DmWtBR\nCr7KsPCCxr+iZ3OXfEHehprAfC7Jvvt4I8jf87GpMWYQM65sLxshxOBb9lu0\nX33zGmcuOvdl0KRjFlGWjellfpJtLu0TzbBfyrNA3SgLBDdKfM3L3XLzvEb5\nPww3ky5hNuzh6J0YX0g3VRS6vbylSqZxSbJ64e571bCNXkrRX/3G3o8l3Zlu\nYL4zUQKARn7ajd70zbc9IFHxXVgUI3zPoODmTrvbkVRxhJkaq4laLgQ8modI\n0ZpONl1cy+tCTFnYaY9TRoO0zyvrR2hz/zdXqhKHiJ+kIM5uSs0+xzkzYNMq\nASFc\r\n=Uwzy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGbM49tNakbxcJqnavU/Jk6cHKfucGozT3M1u61nCj8IAiEA+gjfCrHFr2MTqBPoZ+EL9YM5SPkp4QIrOSHvoSToEv8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.ae4f422b.0_1626479688509_0.7512738571627409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-select","version":"0.23.0-canary.90ff8057.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/floating-label":"=12.0.0-canary.4d95812f9.0","@material/line-ripple":"=12.0.0-canary.4d95812f9.0","@material/list":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-floating-label":"0.23.0-canary.90ff8057.0","@material/mwc-icon":"0.23.0-canary.90ff8057.0","@material/mwc-line-ripple":"0.23.0-canary.90ff8057.0","@material/mwc-list":"0.23.0-canary.90ff8057.0","@material/mwc-menu":"0.23.0-canary.90ff8057.0","@material/mwc-notched-outline":"0.23.0-canary.90ff8057.0","@material/select":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tg+QpI5oDQVdtTq6rwNlPJB+/goCbWxptDb9IIH4aO61NygwKVMe1NN2opjvHC+A+M6uaHqzrOHcZggUDMcHnw==","shasum":"c86373179a3c141dce5aa83a982bca949a99cb17","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.90ff8057.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YdjCRA9TVsSAnZWagAAq1oP/18wXoV4iaDZWrzVmJ9d\nz97aQH3I62vOQNkHkrQa6kdT3+qh6r7fiL+P71FWsMYVKk0Et6cZ3lvzQWbZ\nJMLi3eVrDeVKEM7CP+dsX3b2pX2uNKQKO0eZYlVZbeWUVPiQLmUKzmgGDF1z\nHLEAzSinXcl9BbKJ4tkvEXMVWNYAThEtKi4c7jG3SQAgjHMxLpGd+goMBAf+\n86cRpe8Dt2aiy0Yh7OXL3gOj4rJ1aHu7LKRWWPKg541xf+PLBOYSLa+xjh/5\nisvSWUJbziAsh82zAYkZTycwhNuTqFV9Of/59sAq070vspWCJvxBVrltHbru\nBv02jeXRfPc67ydvjqjYjgJmgbSHRoNBCJmPI1HNsfrhNi9hhWvwGg8woTEG\nu+PZeuZM3dXOFIMnZXXhNTE4xMrLPYCvQSn8kuSIi9c8/v/U5pyxWiqAa1hq\n9/+8qcI6kJzcJNdXanrhN/Grfw8I9SVCFg8b19zP1d+UBx+9n1v8qHdvljF+\neb9zGXAHtweNqXmgI5EL6wAiVUnibh9jOktCBxyx/PhypsTLMRfkN9ZOfTv+\nTmFz67Cb0Y9AaHaNu+t9VyzLjuWfKo0WrQakWUeuQq9mwdvQgNuE/AehBaLA\numn5HBcqcCGj2tDxgDK8n0oOdCpqQgtwyZE3uWPAnZ5bxcJGkcVuAvVFT07i\nWUja\r\n=n5Cq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgm9ikO4+Drvhmm2UIfCHoDWIY73dfN9dRgAA1gHlaogIhAI7hD4pwyc0c7qxGeh4o/jd3VjhtFVhIkOtIrWnulwNx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.90ff8057.0_1626703715549_0.13640166876685655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-select","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/floating-label":"=12.0.0-canary.4d95812f9.0","@material/line-ripple":"=12.0.0-canary.4d95812f9.0","@material/list":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-floating-label":"0.23.0-canary.dd7b75d1.0","@material/mwc-icon":"0.23.0-canary.dd7b75d1.0","@material/mwc-line-ripple":"0.23.0-canary.dd7b75d1.0","@material/mwc-list":"0.23.0-canary.dd7b75d1.0","@material/mwc-menu":"0.23.0-canary.dd7b75d1.0","@material/mwc-notched-outline":"0.23.0-canary.dd7b75d1.0","@material/select":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BDzrWy5OKSmYgpoeXJ7yrKMCh6Vf7KMqqxPQDI026fLd4y9KV1BZMJ1biIg/r4gQau+sNoAriJwMlM7SjwU0AQ==","shasum":"68e8f85f2a09350e156ffeb4d301896cde355ac0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.dd7b75d1.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9bujCRA9TVsSAnZWagAAMqoP+wQFfCOmxSkTfIO3+o6c\nw8xcYEsf0836zUpdpyvoaqd4qZBgcU3DFE7AJiyLaeY/y1QhvPX3XvfQp+Ds\nbENhVPFlxqGbRIPfD9vl0QMekyTV/ryP0NO4fD9QddrqN94Ciu0kn1kmy3j5\n3Mxg76dTB0dwVwv3lCOTW5RRc/c8Y0B6j38QxmcbilEZZGXEq3/Fax5JM7T0\nucod3kZ/4bfhF6osBSzrIxj1yi5b+fyqyhiflOxNk/Uh14CiljjdTQeXStUX\ngqQSwdeBaZhFd2MIUqiLiWHGM8+X+sFT1ut/0FgHmkKmJLiouxWUSfs+qorH\n8DbDXRTgdm7MH5Fe8MucV2aDMWhJksht9Fi/89yWxSioOChpe0IcOHkLdSWV\nOs8oryYP584w+cinAsUV6gZU0yeMpck19PqKZPXxjO74V+Ud0PorjCvi4o4J\nnIu6g0+m5YB/0lXuThFvHl4hdNo2EZ44qhxlzqI3QO0mX2UjALdrFIOGKe/9\n0l2GMY9vJYbP7r08AiNdqHySti8SHliyuRbJmQn7UlaFYgIRrzS391DGK0PX\nLtQCw7ZiibvEsV/D0Yrs46LBiYBGTipqZfGQ3UmThOyPi3t4weo/iw1Xazx3\n1Tcux+M+7uQEGuH/H+yNnTKc4cGFWpyqIod95oVIQQRsxf+TGU6/AMuaZ85M\nm1zE\r\n=h66O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzZszrcDzxrBq+XRw7ZeTGzl7Q4tB/TR8wgDgHMaEVNgIgMkmYaoq9/i7jhxQVnieNcrZTjghWlwc66ss8RE1o2wQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.dd7b75d1.0_1626717090906_0.49116040256779425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-select","version":"0.23.0-canary.104debd5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.38d1846cc.0","@material/floating-label":"=12.0.0-canary.38d1846cc.0","@material/line-ripple":"=12.0.0-canary.38d1846cc.0","@material/list":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-floating-label":"0.23.0-canary.104debd5.0","@material/mwc-icon":"0.23.0-canary.104debd5.0","@material/mwc-line-ripple":"0.23.0-canary.104debd5.0","@material/mwc-list":"0.23.0-canary.104debd5.0","@material/mwc-menu":"0.23.0-canary.104debd5.0","@material/mwc-notched-outline":"0.23.0-canary.104debd5.0","@material/select":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DsBnbfc//GN0XzlO/YBaxV09FdYqCQyCpT11YLoUCjWB4//S201KPPfQcogFsUWQKU+/fkqnDAWa74JRsxltKg==","shasum":"2a16c3b542741db037b53c0d0b508eb1f9059bbe","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.104debd5.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gKdCRA9TVsSAnZWagAADnQP/3sIHrPNHrhYwWpVzWlx\nt8uc+oGugv3CRwFtGUspRejrgR5ZCR3Fu3Js4BqmHeVdPGscb04T6jjfUmL5\nJoO/AFMhlYPenpV0FBo9JF24ciyJn/N4X0FQ4fCiIokkhyh5ywlhOmEa33wi\nVdRDE/GOAY4zmdRN9pvTonBAPUt3xx5o5/DClXz1/uK5E0iLc+MZedoSJthp\n9Rf3qc7jWb8RSX29WtJsrYASbiVxqE9xc3MGqpBrsQj6LwCON+nll8Ou4rbX\nM0Vh9ueNUubrReulR9pnk732TI4Q6tjHZq8PeRH00Z8Rxm7YWN9wRtCPdGZS\njwmRhPNY4YeuCy38ISyo7GTv/lU2YafV0hBc3ewWU0THwx4bohON8XOWAq6Q\nIbGmcGt5beLEJeTc4kirwzHotnhxL1DonB/9qVF9AfEmWBgGPARVZMLh+Ulj\nOpXRqNnUF7g9PvZ5Cm+117dM0OBa/8snzupsWamvgseZ2AuU2zfcUNqw7bYo\nStSRlZ+NyWwMNZBYT+Aurs7gV+zuzJfjhZl9iNXwKm16GCOfKZ1p8IEZze5s\nNYA/ICmbPShTwNoR4Ft7y0bf59RWmUTuV9fl+LDPO7DCEto0xS/GGj0PMI7o\nU57RjIycf/q10i6+yXKbscb4hholCyVuFl4Ll270XE40cQxaJ4vvWdxqS6o8\nu19o\r\n=piLh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlF+VqFalGhNPRlaHLRabf+q3x7u55/uvQoG/EdQqGrQIgVQOMJpiSmkiDB4VliHuG5yYpEONRPh1gDFKx5occfCo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.104debd5.0_1626735261000_0.8423761881529004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-select","version":"0.23.0-canary.4612705d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.38d1846cc.0","@material/floating-label":"=12.0.0-canary.38d1846cc.0","@material/line-ripple":"=12.0.0-canary.38d1846cc.0","@material/list":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-floating-label":"0.23.0-canary.4612705d.0","@material/mwc-icon":"0.23.0-canary.4612705d.0","@material/mwc-line-ripple":"0.23.0-canary.4612705d.0","@material/mwc-list":"0.23.0-canary.4612705d.0","@material/mwc-menu":"0.23.0-canary.4612705d.0","@material/mwc-notched-outline":"0.23.0-canary.4612705d.0","@material/select":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eiHei9zVQaLz2fGKt/p1uEAkGjXa91B+uGjWhWnsVAYTgMZbPE3Atksp+70iuC2Ksoq2Y6b7FW/ofcEmXAVC2Q==","shasum":"72ab07be797d0657a10db1fc73fdeccbcd577626","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.4612705d.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vRGCRA9TVsSAnZWagAA5VgP/33IEeSq2d6du3GI/BUW\nb0dRoNfUPwSXxVBbCv9S60r1KIpz1B7fv5ZNpX32ht5hF2cktUmg3hssu+Hb\nFqQl0YA3GCsWf1zvWMkO39yQ2dVjEiu+scOYRzI/KW7T5PmfAqZIIWqTmdEM\n1UDbCO4OZziQZgQbAA4tg7nH5Wq2mMyzWfHv7SiOfhLrAIcWWMia3HxZj+0/\n+p/YMjmsEcqtBJsjweUNA+G0IO2QRtKCnDsXNCVptFgLD2/Uurj7sWr98Mfg\nf5mtAR6WhIf0QkBtyQGpYedg92B+0HTNZtBrlg5q1UnGcjSS2liUqmCtcVNK\nLcjgBlMmmfB4Ou9GK8aMUrcgPH2Z8uMmea0KvWO8peuDMj2v3+H9cjnyPMpU\nkn3VcRLAuzPKz8SlWgrx7agQEFp/AhGUuSnucwbxR8czIJWM3LddZICWsN5A\nDzPwEnyTZjSAaegu4l1/4IwzSGhS0mujVnkRY+KmKDfbBWh51vZxp/OoMBri\nQk2To2Zj+DYsND/d9QFR8rknKZQEDxjiQLS1o/Svy+iRZfbkd5il4taIalP0\nbVCl/+n/ozlT99tNd3/D071NXHLKesHl7ftTEzyNMtEKIpcn9Q+cBgIx2WA+\nHDuLonDYue9xJkkdap9rpO6k0olqjUBrzYvbdJHllYlIvNc52gUsOAzrJr7L\n3rvr\r\n=9vMb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPJOC4oPPTXaBV+Q3gGaqC/dB3AGyJyKPMcBrjZRBzAQIgPgK0jIJwqKoe5dfQKsjPZIJuzXAA3q+QXsiqoeC+CIE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.4612705d.0_1626797126615_0.2732443746001456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-select","version":"0.23.0-canary.b36502a2.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.6b0442278.0","@material/floating-label":"=12.0.0-canary.6b0442278.0","@material/line-ripple":"=12.0.0-canary.6b0442278.0","@material/list":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-floating-label":"0.23.0-canary.b36502a2.0","@material/mwc-icon":"0.23.0-canary.b36502a2.0","@material/mwc-line-ripple":"0.23.0-canary.b36502a2.0","@material/mwc-list":"0.23.0-canary.b36502a2.0","@material/mwc-menu":"0.23.0-canary.b36502a2.0","@material/mwc-notched-outline":"0.23.0-canary.b36502a2.0","@material/select":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0FNJRfb1i6prz4ruxnfEnesu99YJ8u4VaGH8Y2oO5ipQ0LQADir3bcf97ZpOK6+3bOsHnTEB/d0gashX0k0BAA==","shasum":"82bf9b732c1b513f68f5baa9eb2b918e7f8f5bb9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.b36502a2.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KEsCRA9TVsSAnZWagAAuCsP/08USgRFbj1JCUROuoOT\nNycAKPGCK3WY5eN03AArpboa4KIIXqHEVJMLi6vM2k8AWTqzDDEHcKbF82zO\ncN6UL0nISto9un70/3HyvWMrvWaFzBnJIbjKyb+VbTxlvpCla0WAuRbP9ByG\n/T8RODWTI85lct/GgYEePnGkHw+tby7YQmj4tbCvk04LZFFWjDgwRQVWQvYm\nEOHd+Iq1TDg1gBY0qCHP0KvRwo8H7CJb9y7i3+MEheAL6uBAtW7udp+s4nDk\nHJeANZJ+tZRa+KDX8exoNd3nIgyzbVbGXMhKMOX2TBeT4ef7ALwq8DdU3WtO\nreTCl51HUUJw6Xj9aEBhWY0nnnIXBjjfc5is2YZB1yocdQSd0KOeLr+W2ciI\nXxoDygrc0LFVhfxAQOXNvb15rJJsIkp73mAFDzTQk7G8lkCDFdItxY0atu7L\npMPNAdslKOHbRgPMCFbs4sobjIxm66gBs8pwcWjAPbcD7NwFJh+PdYY8NBe5\nt0NKcjQYmmdnxkUtR6LJvts/qC3b89WVXuCzq95c9dz4rXBU2rRjHKvkLLE7\nSo1QQRE7sHThRllNsJL+87Yi5+uLiHW2SsX0isX7zTgWdOGfDasKpwqKXJW/\n4doM8WLXdC+ZJj1cwspD+ENksmmSVuHHpz7fT+Z/x6KU5L2/hLm5+xzZmzj7\nPR+y\r\n=GXP6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZkRTn4A6JrM/JU5y383RDe8tBbPQU251Yx39WG8k/KgIgcPVPJagDPPbnqyaFDHQu3CbFdGrRF84GzZmfTZ8LL+A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.b36502a2.0_1626906924209_0.9912813984199107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-select","version":"0.23.0-canary.2c392ab3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.6b0442278.0","@material/floating-label":"=12.0.0-canary.6b0442278.0","@material/line-ripple":"=12.0.0-canary.6b0442278.0","@material/list":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-floating-label":"0.23.0-canary.2c392ab3.0","@material/mwc-icon":"0.23.0-canary.2c392ab3.0","@material/mwc-line-ripple":"0.23.0-canary.2c392ab3.0","@material/mwc-list":"0.23.0-canary.2c392ab3.0","@material/mwc-menu":"0.23.0-canary.2c392ab3.0","@material/mwc-notched-outline":"0.23.0-canary.2c392ab3.0","@material/select":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qGXyAMHuNyUmedlOrDtgxIqKiNeOTzhEjoHKBok6oAViywVsrH7Q53K4njafbzt2ujCWhkG8MAic62M4qT8gXQ==","shasum":"b4d0c352e8037976c015593c6c147630a740006c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.2c392ab3.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZ2CRA9TVsSAnZWagAAPrMP/2Mk6bnmCVwy+SujuPDs\nbS+bQuSyrUOJYbZCnZKC3iuD5lVb9hpYt6qPKuqb2z72By1EyxdDo79ugJz+\nrl1nacAU5B3Fwmr29UKRYx766Ek2WFDo4dKASenBhM+xNkM/KW+JJvOEBxw/\nqPaDkgp0wJwSQ+YvxqWXHq94tUb7OwYKXZbw9sHjkX0RH6mWDBuKNLm8PbcC\nOGeVOhD0+BiJJcZ+2w3rnnVEjSvF7Tow0IerD2aqyEiG8lcvFJCVaBaplvq3\nYnnMAXo+R5m4vmF9p8ebHFhjvyGGNU/7tircxaFiHAew6GLZ69SZ7pOkpW3l\nC+qKLzgqKHSfNPP8TCUvoYc50/TOJhXUD7VyNEc0b+dqVhYas5pt8fK8K3P+\nM/1YHID2nylULdiwndpSfX69hrTPHbwyxXRkqFh0/N1izQSRQeOiYjCQ8B95\nQ0sYHuE44y1HQNBEmeEMzo2k9dwZhKbL8N8490su6HdwSb6FUmzDf6J8sNoJ\ne5vWY5NDzUDFRToH4avIsbLV+/+QlgviPWgieZeZlLxilzftZky/1Q87x6vc\nlbZYnqZQl7cb3jQ7dcaeP0F7rEumnpXq2hIeeEMQOZy1klp/m3+nhEQ2hn8I\njeUZp0Ga+4cI/w2747gf1N+xtk9dn8WRuvwEvgVuuDfdyJdTB7feOywE7EFK\npRPy\r\n=5ego\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDu8xdasJNmCca+I2U5niSPc+8rclJfZf7HW5PSJdbGbwIgQI5nnSYa+5CE8ClilPylqDHsewHEKRvjeUrO6th1n2M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.2c392ab3.0_1626965622497_0.7582440793281882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-select","version":"0.23.0-canary.e8bac95a.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.5f00e454a.0","@material/floating-label":"=12.0.0-canary.5f00e454a.0","@material/line-ripple":"=12.0.0-canary.5f00e454a.0","@material/list":"=12.0.0-canary.5f00e454a.0","@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-floating-label":"0.23.0-canary.e8bac95a.0","@material/mwc-icon":"0.23.0-canary.e8bac95a.0","@material/mwc-line-ripple":"0.23.0-canary.e8bac95a.0","@material/mwc-list":"0.23.0-canary.e8bac95a.0","@material/mwc-menu":"0.23.0-canary.e8bac95a.0","@material/mwc-notched-outline":"0.23.0-canary.e8bac95a.0","@material/select":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.5f00e454a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZJ6q4U8SNvAS/mgnqdKA4//pKKa7w1n5vmKStxRRUQgkkNDDKyroG98GJllDwSPGXM7avpTxDq9kMTD4HBk4vQ==","shasum":"36fc4afe80ad16edbdc6acdce47574f73e2bbf22","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.e8bac95a.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b60CRA9TVsSAnZWagAAONQQAJTpWduB7pwgmzpVXL4a\nzl4hMHbNY1hAb4gaFil70jzgtgYuNfraY8MMZ+JhKLWwOgbAn5S7j5o64m5G\ntkZ3QAJP9VrLpGAEb2hSSFg9jJkE68tVFsrXBMOQbQVoh6w+ZyYH2jzAgija\ndDsZs1yIn4reKSYv9Oq/YcPL/Eav2d5N/4P2RQx4eBFQ1xUt42SZjGBjCQZk\n2n26xxyfva1IJm3kO0l2Wo4+HjVJhKdl2nEIeP2zGJ87QQbgnQ2vKlSTG5O1\nPmpbjqlwyAjJVzWjx8J7sLyRGx+Q5+ruBi6tb8BcfbG0jGpLRiz4MNR1xsjc\nw8G85vPbFGV+2HGd3ZeOns0tkBrYI+CgHj/EnVjaGKXVMGiItRvtKGV8DbuW\nzl7hUcgraHDOSrWQ/tbBx/Nr2XIX/YVUVGcKlej9pXW1/rAuRYLCwI13g8y2\nhypOXT8FBll50lJXV0ueifT3BocdPA9m9oDn2kJ5qCUWpxhf+L0+TZeHmWml\nCHh9Ia90/QvN8AjeFd02iVepy3ZzWqXVpy8X7TjXCx7auaeFXqH1Cu18FMxp\nCjtVXwx3ImZ15VP6ESG235c9O1TvJEpQFuzyKRR4qE+v/YO+jLr8au+l+lGd\nj3is1TMQlg+lNTxRx4AXgW3aiwwPArjhnmaqVRqJywPxDi+ez+uzOZ86NT86\n+ZWG\r\n=mNA0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIBblCfoEW2v5YAPC7CDKsuKGn/0+0f3wmKxacaH6scAIhAOdobJKqJTptQf8P0c6YWGIinFpPLCTnHcuPfo69eITL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.e8bac95a.0_1626980020633_0.8467881213933668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-select","version":"0.23.0-canary.38f29f8f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/floating-label":"=12.0.0-canary.90e08fc6b.0","@material/line-ripple":"=12.0.0-canary.90e08fc6b.0","@material/list":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-floating-label":"0.23.0-canary.38f29f8f.0","@material/mwc-icon":"0.23.0-canary.38f29f8f.0","@material/mwc-line-ripple":"0.23.0-canary.38f29f8f.0","@material/mwc-list":"0.23.0-canary.38f29f8f.0","@material/mwc-menu":"0.23.0-canary.38f29f8f.0","@material/mwc-notched-outline":"0.23.0-canary.38f29f8f.0","@material/select":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l2ozuh3BccdauycnnxYr2xO6LQ8YpsilghxTt5Zm85ZCta0lOBLQLki37DxbG74da47KnJkjP0S1ABPOCcFh9w==","shasum":"ecfe341bf64f3a841eb9c1eaa0b361823e8cfc83","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.38f29f8f.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+weSCRA9TVsSAnZWagAAsw8P/i+sv1+ggA9Nq11f9cpr\nmhlwffLZK3339dCClBTtKRcklQRgqcC8G5X5XTKVPkDMc8PKwfpAZikYVeaJ\nCwxGpdmA0stYDdzN9xgHv9J39XaLXW/fa+r7TxMhJdvKjnMX9IbAyHOXbWm0\n3+kV+MDueLFSHfsCIW2qYx1DdVbRB0HfE18SxnEWQAsJeEO8Q8Ar+6h7/YSW\nTYKLccm1dRjBEOLRYkRWgPE+asaU29rmny4nUJ8+Fd1XvXOuQl11Ehf5Gx2A\nV3Fk4M2RbCEKrnRDKEWU6iXge1C6NS9PSSRcSiwcaVt6zlyZe7oBj8RrmV8k\nYPLzrBYzbBg/w0uUh8+4WQedRlQaBcb1fzLyR6py8zIZFHHendlCWzfFpl5/\n9ic8t0CQnf8l96+Hf8HNGUtAapM4I5tnMSVP1MJFAD7AH51Bb2OQ2175VmRu\nnStxTuPKGXW2m5/B/sJMNCHdyjzVhFK68FzHIIbTQD5/SoR4WaaFOAVISys0\niqaqgGMCauOI8Tw8gy9hWC2+t2AUGz7Cuxd+mFXokv7mNkqPNfQU0iYzPCmz\nwrEZuXMiG/npOW2c+PAbxR00KP5FY2x8Zzar02Y9zXI1vwLtDHacQ1n98csn\n01Lv6DifcvEzmiumrZgZV7HAsQsoVO3deKTvscHkNt1iJnhX1dfqnlLAipo3\n83Yi\r\n=IdSy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5+Mh1/9Gug+4HakhD2lLihJqo2NYK+0X3VVrJLMLcbwIhALaGmFnkE/qNNEKUY9v7xguIQKrEZSgBmMUz+8DPwEpl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.38f29f8f.0_1627064209946_0.23872279140170272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-select","version":"0.23.0-canary.e0693475.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/floating-label":"=12.0.0-canary.90e08fc6b.0","@material/line-ripple":"=12.0.0-canary.90e08fc6b.0","@material/list":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-floating-label":"0.23.0-canary.e0693475.0","@material/mwc-icon":"0.23.0-canary.e0693475.0","@material/mwc-line-ripple":"0.23.0-canary.e0693475.0","@material/mwc-list":"0.23.0-canary.e0693475.0","@material/mwc-menu":"0.23.0-canary.e0693475.0","@material/mwc-notched-outline":"0.23.0-canary.e0693475.0","@material/select":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R7jsl4S7XCba6b6URWcFtxptfRSdjLJsxxOSROmZXoAqd4ypsVWhe1Zaprh4/UQG3TAFNMDpghvvLVPmfQNyiQ==","shasum":"74a8ce1281fec312d47dbb3dae590e50af9ca049","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.e0693475.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xD7CRA9TVsSAnZWagAAwMEQAJbe8reVRYcHSZNbwH7g\nLBXZtgTq/Qa8z/R/ewCaaWX5krbt+S/2RQVvJitxN3AAtp2l72PYOtfaopnM\nbq/ytAgxNZoOzJMVNrZ22PKba6XmVWZ/O95pSwPSdq6IOstQDZUJjpQZc87W\nwsm8twgY9zEiQmc2XKS9JOgFH4zLbN/32zVjItAm14910Z+VuwDvMD8qSr7V\nXYMMP3/eyeorMCFY8/iqz/qjm5f5cg/8mNQJgQbr0fstA4RnLlvUdaNtnxfw\nlipNAqsLXMpzjOi6nbvLA+F/0GR58SLNjg5ICoXWw0HQhWR6Px4f1+Z3ST6b\nsRblmSYBtwlaS+h5+xvyopuMkZhhcssiqJ00Ndd0kg6HFSsWUOK1yA/1caCS\nUrko5Wvf46EZmSDSOzf658hIYoE97NDxw3lO+krk+k19XUBejYVqIcNwAn0z\nNpahTfYe53OLrGAu4nqj9G00FtxpPCBbwG2hJVLaWY+M1Cp+TYyGTRBK0ZoD\n9B3pMTTHtQuZKX+OsdbLIw3nm8gcwlVyXvj2ihZ30fxJcIdA66znhKVtDhyM\nJbfHEa6h7hgvZY6k/W5DNEhHmXp971a1KhjS1diTfL66ZgN4cpldDrUpuPdQ\nvQCiW7/UBvF1OWIpvK8j+75JZkrkL1DpaZwZd5JhX8rSQU7QxxX/p+dBFFmp\nyZwr\r\n=ZkyJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCb8eB2zpe36NBv2eMZRmdGFbpB1jyKIodGM/VnJHa+AiEAoh2leW/JGzfTK1NT5sArdLhsjCQ4W/fhyVuyuP1YiIE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.e0693475.0_1627066618987_0.07795043900375798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-select","version":"0.23.0-canary.d595e030.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/floating-label":"=12.0.0-canary.90e08fc6b.0","@material/line-ripple":"=12.0.0-canary.90e08fc6b.0","@material/list":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-floating-label":"0.23.0-canary.d595e030.0","@material/mwc-icon":"0.23.0-canary.d595e030.0","@material/mwc-line-ripple":"0.23.0-canary.d595e030.0","@material/mwc-list":"0.23.0-canary.d595e030.0","@material/mwc-menu":"0.23.0-canary.d595e030.0","@material/mwc-notched-outline":"0.23.0-canary.d595e030.0","@material/select":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SjdgzktT9sRsOOGnP4+PSf5Zqs2bAN4uHSNZFhm8z1b3FtGy2kmipT8KKleC8/Aoac6odmE87U9oATsL5tboFQ==","shasum":"c6f1072d2514193cbefb5e77095d102e024bbb86","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.d595e030.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxoCRA9TVsSAnZWagAAG6EQAKCLdM+FpnrFp+LpwcLf\n7jVqezCXFSuMyMpEGI5YdMYPb2sPB8E9Wp+8ljVvsBkbHsTdlDj8/g77WRo3\ndi8QcHurcc7J3gEOcV3pjbxLL8h00IAICCZdWTQ7JBiIE28ZNATufWdyHMg8\nBgAginDqZGbIGxyjDIQBUvPftdS7lMl5TIiAIiHZpv/znJir2w3oAvCFiN+H\nIcpyLg3290EAefPIX2F3h58tjU4bnjvMJkJ5m6jE7Np/7gQRkAzMiGn7wgPC\n0tPr1sIlIUjrWTNmaRFzwIO0tljFSnrSvKWT7Zwmgy5i8L01Bc/FjIPudWiy\nGJQHtw32G8zFcFzkQbWzRYOfBcbkAdKct2ONWRv3GzZ5RT5sTg7ybUm3s8xn\nH1TYqPAtvDzQCLHiXWrWoiYMxa3fdfC4eUPSOU8SQVKcMfAnlPcHfSQWkI1T\nrB6YjbgZtuhErbTTomCXF1otqtl+1/xu6jA3EW0B11lCixxqDkXJftRtaz7B\nknIwB/WXf2V9IWslPpat1mZNIaVnvuebfukn4vfkbdFgLUMQPaZFH0ui6RdA\nDzHI2RkpuGFd5qcXudIzwMdFJSEaunV/Rx6v+Sf2akWJ4sjUFXif9wpbPiSk\nukuJwWGYrb18vhAh1R6Mhcl2gJiqR+g+btuUVo9uUAtRWKqiiVbhf9kUESE7\nQ7+q\r\n=ujz2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICTCo0eBFdgmoqR9Hk3TITmjv4TECi9GTyDrjQeHJ+KjAiAoItg1q6fOfWlorqRwanRNnmPX96PvsnnKXGiQro8xIg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.d595e030.0_1627073639882_0.2669787976358382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-select","version":"0.23.0-canary.fe7cca31.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/floating-label":"=12.0.0-canary.3f36ac75c.0","@material/line-ripple":"=12.0.0-canary.3f36ac75c.0","@material/list":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-floating-label":"0.23.0-canary.fe7cca31.0","@material/mwc-icon":"0.23.0-canary.fe7cca31.0","@material/mwc-line-ripple":"0.23.0-canary.fe7cca31.0","@material/mwc-list":"0.23.0-canary.fe7cca31.0","@material/mwc-menu":"0.23.0-canary.fe7cca31.0","@material/mwc-notched-outline":"0.23.0-canary.fe7cca31.0","@material/select":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BH0RF7EezlwkGPAjOCI1htGCd8h57kfY2LPEikukHAwlewcHY3TpDT14qFfxVo7bh55l6Mc9PW647HdfFCVuqg==","shasum":"da52e072403eedfb6b6fa6df82bb0d31435dbf2a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.fe7cca31.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ztNCRA9TVsSAnZWagAAYY0P/3CYZhifUZe8hCEu6OQJ\nPH03nZRmKZQs1SPYKN+pRNRQdGNVu9rz42fAvmjATq0tR3Rqgildvh05DmuL\nfQX3JCxxi6/svLDmgdGSldlpx+lTqul8L7bkGNknHfb/N7tO9qX1JsTaxK02\nibVgGM3xxhGb4hOKlEJJd25KoUkcclEWArScotYLv8PCiND3bJKlxSbDoVr7\nwPOq5/sVwgCpbtTIqaJe1nJIo5B8OQO+DXH07P/nYEb/17yymu1Hjqyz8pGE\nndecuayQ9xcYAsEaiDfrFcQqSXe/zoEjAT1t3tUW0T7laFgWXZ8gkoQTD5mY\nkg/7a/SASSLHevCs1zhx2XLAvfLPFTVBBC76IG51yii6iG+ipUMMwLFPj48e\nFGhPP/AKf3Ubv0OBMBTls2Qs8sijbnaNfSFBTFMROkJEsvNFK0hA+5cmtSkD\nHPksm413Fk3t6zhgarrFzcQmyqpCptdvfVlk3qh5sDPCH5wVXHxDVK1I+dTk\nh3memqUti/ONXOgJB/4/HZI9P9fmY9YhC4NEXDQc+PBvMKXi/y77ZipXtpDX\np2va/Li82mFOqeKnYG+1IGwEPSnGvY9ClUsVFQi+GkgC7pUNeNLvoA1au2XM\niSn3Bszta61LYvuI3B1GG8XMLq82BJXXSQSEKRLMdIwta9mEcaOKrwzryfaZ\n9fbD\r\n=KO5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFppcAGGdTl9UBet8GbEa8C8J/2b+eDt6TgIoJhMWA6NAiBNCn6qy5Tvq9xnLqKLvc6RNrmjB/PxfXlGMGy5y52K0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.fe7cca31.0_1627077453239_0.9462921474313126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-select","version":"0.23.0-canary.fd9da483.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/floating-label":"=12.0.0-canary.3f36ac75c.0","@material/line-ripple":"=12.0.0-canary.3f36ac75c.0","@material/list":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-floating-label":"0.23.0-canary.fd9da483.0","@material/mwc-icon":"0.23.0-canary.fd9da483.0","@material/mwc-line-ripple":"0.23.0-canary.fd9da483.0","@material/mwc-list":"0.23.0-canary.fd9da483.0","@material/mwc-menu":"0.23.0-canary.fd9da483.0","@material/mwc-notched-outline":"0.23.0-canary.fd9da483.0","@material/select":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UEtNlL2ct9YUrCNfqtEosRtPghfJ/z3uOc/YqIdJJVIDPu7sitZZKp7ZyUH7QTqrc+YX1BWGKvy56egPCC1tqA==","shasum":"a6b873f81475bf56739110d2e8f17f7b1968f580","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.fd9da483.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yhYCRA9TVsSAnZWagAAG6YQAJGjZ0+Ngj4WFbt1oiCq\nwH2jdJbZbqp/neidr1jUvk65JM43c5kQM1JSex47AE67Wb/dX7TmEM8FqZEJ\ng5cKIZ2MpvRfGn+9Y9zimafqyu7HPyIenP8OlcZG0cZ3oURYrVYrziMYZPx0\n7+bssXFkZtyQVclq31ZHkg1o6wygGTsjlFDqe6KwdFEDPN1rz7EveVH+/+yk\nVCBmmfyjEBk9raaJfipP3Cne4Jhi/J0D7uBciZm6v+kovMoGiF0HeO0uIpdl\nDoxx+Cekb+45oxjaSndxlJUYLtcfPDmmzXmsihXRSpNL5rekRofVgsSrv42y\nRMWcd2YAicQz1rLcPYoLb5UE65fVnEoC9xeMD1OiuF5XWL+u0xg33mqQtETk\nZ+EwiUV/cIwv43WTKyDYjr45LcWAxGI/zzZhUH6HVOvfc+c20EsQOQ6IeGu5\nUlXORAzP3szI/XdPmuubXnf3iL48paP49+h0eTMBkeIjzwtmmPgIybMQfaBi\nDlIzwC+WG7jDTp5D/rrht4pMo8U4sq4zojEp4Tx80yn4HpSf3LGC9yi3u1Zk\nG0gZBUwi9Hz58oCqKYeEEarsw35Uv9tQgzRhYd2TuR4m2oeXGy56KmF5zyXa\nPTnTV/xOq0d1pz1NVkoTSs0atfVlt0vuRAYXjluRfyYlBBiouxosyizP3bF5\ni3J3\r\n=0FFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7CheihHIDgP0mY0vFzzX7PK98I1RIi632YFnPVSK+hwIhAOmVaRFmvtIw7w2Y5F4CGMB2hZib9GLE56+45wn6K7Od"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.fd9da483.0_1627334744041_0.9444477906254409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-select","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/floating-label":"=12.0.0-canary.3f36ac75c.0","@material/line-ripple":"=12.0.0-canary.3f36ac75c.0","@material/list":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-floating-label":"0.23.0-canary.8a4c7e06.0","@material/mwc-icon":"0.23.0-canary.8a4c7e06.0","@material/mwc-line-ripple":"0.23.0-canary.8a4c7e06.0","@material/mwc-list":"0.23.0-canary.8a4c7e06.0","@material/mwc-menu":"0.23.0-canary.8a4c7e06.0","@material/mwc-notched-outline":"0.23.0-canary.8a4c7e06.0","@material/select":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ILKoNGWg20EZRqL+v8utCtBN09FdpuxeViIpyW5NtIz6TOuVYgUcRCzaTiANVDxtOqIkJGcHpX06Fn5W0GiFfw==","shasum":"1e1f8bb4c4fc6d04c6e3ff013ed8b7b82f6de4bc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.8a4c7e06.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrhCRA9TVsSAnZWagAA/VEQAJ3+BuDtTGYEmo3k5+4/\nVqQ/0AYOwnr0LWcIajHTjE3G2W/bD1NKVD9P4baMbRHDRGH5yeyNnczzVvd/\n1K0IKLE2dp9WlNTkZV9y5lK02Nl4jNxB1tZV6SkxEUDfXjVA+KU6jq0GwmtW\n1uCD5Si2O4qhE7ByDj+aYb1i5+94UWlDheHUvD8GpYjLYHdQz8Vy7Y1WsMoi\nIyum2aUTHBr8qdV85WVyKqxcIgPHwU/6ifHDfn+N9EfwNmof23ZNurDCgBSu\nTn2ZdMiJ+WfTBbZN6wLIToBvUyyEXZhkxSJsJX7nY2AHPczL4i3h/KiwjaUg\nuduJUwXFSXohfEJPWM/ZtyX6Xwt/KsQsac2m+b27lDEXSKmEfHxWXUsw0EE9\nhdxC0UHs5bVQdVkRliTF3UuRimaQSjtsb1HSNm4tI1iHzFqY3UPaxO7ZtwhQ\nDYzfBsy0QV5ALY1hLnjT0M6NTHC4n5wf4W6su8MKbzv/y4vQW8k4MP9vwcJb\nxgebmyDfk/KJKxA/qyXteqC1fmyOM1cQksRjKKeQkXwj11ArJz6BL6UhkBU2\nN9hPH6FtFQHTD65zFpOtcLy777iBXbVdUXu74z1tOlYd3T78g34kkC/5Zify\nH3HTm+3UUpwRrEurjNn5Kb8KfZMPl9+I4Zcs/U7ZS42iF/F8n9Y0eQ1NCjs7\n2CpS\r\n=1rjZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8MM4RIbOu2ls5g0wZ8WeNOHQCuTbPpB7h4MANegDMdwIhAKJKjdkf3qlPeRTXtFdHBuSyYcAMllYSBcU0P9ni8+cK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.8a4c7e06.0_1627339489643_0.7238874831082238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-select","version":"0.23.0-canary.5b395fd1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/floating-label":"=12.0.0-canary.3f36ac75c.0","@material/line-ripple":"=12.0.0-canary.3f36ac75c.0","@material/list":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-floating-label":"0.23.0-canary.5b395fd1.0","@material/mwc-icon":"0.23.0-canary.5b395fd1.0","@material/mwc-line-ripple":"0.23.0-canary.5b395fd1.0","@material/mwc-list":"0.23.0-canary.5b395fd1.0","@material/mwc-menu":"0.23.0-canary.5b395fd1.0","@material/mwc-notched-outline":"0.23.0-canary.5b395fd1.0","@material/select":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-stNgia/+tsHWa2ZMHf0xvNrD/j+9z1/W8krU1LVjB2oLa96y6T4fkno68TavKqmOA08QjWPIov4iOtI3Wvu9uw==","shasum":"f3a255e8bfe69abc706397e4340e1ce86f01250b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.5b395fd1.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI6ECRA9TVsSAnZWagAAPtEP/j9S52sTfA+pVKdUblZ2\nh7o8vexNFg0bwE2XVpboQwneyFxZEVy2YaatuHZltL54zIwF7pqALTBgq262\n/6cFo5rA3Va2zEbtPVQtE19mCGizj1usw+/PBzYawt4k4lF+qyKB1fNJCh1t\ncJvjf3V/O/8tRy8Chtz0rCrMYxrDH6iFDdEyRkr7Ib8KKLVVgbBPStDXyZLM\nTQr9LUPBYW1nnWRiBfRhhURIOHAMfbcMGXvhkbyqeLfecn8cBrbiOoNGSYHB\nbP6UedGB0/KIxU4FdwE2O2pa7hrVYF8umkbMy6d6uH09ygPqn/QFpagIlZFU\nWU2svM4rriXy1lyav5lkepBbeHs6o56QdWiaz63tKSgrP8LfkwD9D/fmjRvF\nFjlLbIsyLThZODL0/Af7XrzYK0/9A4q3zgfZl951Vbjg/sKw3m8uIc2nW+PY\nO4jI3bzr5WU4VPabMJF5K7vqwzXEL0NUAmNnT1ZrlE26ufY7m575/dglk+K/\nBYcHU3R4q1/xtavSrQBhcScqMTia+NfkALp/HCn1VyH5atKwfH2pbIh28Hjf\nvOX3/mZRVIIgzLxpMlLEE3eH1BIYHFgcSzckWAiH/kPwSZ/wJTj/RGhLmduY\naC5uMlqMZwmmKX6VAzOc0a1N21Fv2WvB1iQ3bNwfV3/CsFomMccL//ZuyH76\nIrvU\r\n=SHL4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdgffe6HmK8sZCHzpDGRyHMy+rEpJOwL/0bWdCmLv5vAiEAtemKHsO2q9nnULEQhe+1IAZQ1lBuw+mpRXH9csOHx8Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.5b395fd1.0_1627426436086_0.8469844699103055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-select","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/floating-label":"=12.0.0-canary.3f36ac75c.0","@material/line-ripple":"=12.0.0-canary.3f36ac75c.0","@material/list":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-floating-label":"0.23.0-canary.e5efdcc0.0","@material/mwc-icon":"0.23.0-canary.e5efdcc0.0","@material/mwc-line-ripple":"0.23.0-canary.e5efdcc0.0","@material/mwc-list":"0.23.0-canary.e5efdcc0.0","@material/mwc-menu":"0.23.0-canary.e5efdcc0.0","@material/mwc-notched-outline":"0.23.0-canary.e5efdcc0.0","@material/select":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VOtkTiwfW07diQJtVFXw5yA/OrqYx0xPDnCwCER4AuRCfNWt2y+ileX8VKV7jNFtqYlAo68NyVvEbnsTm3QJkQ==","shasum":"30e5190b1d5851a272b1516bef65f373e457ed17","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.e5efdcc0.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZKOCRA9TVsSAnZWagAAwX8P/ix5swksqllNQcoPywJM\ntKZFEMlqWMZpZFL6gQThWhu53ou+fLrwntwnazrGhzP1SBFBC9FAq4EdEoYv\nUwbEQqF7qH8Pn9YKsKdIv3ZcrzTwlYkNuyjraIssDD5Eh+ymRXnv2uLFzAfz\n1DpYzy/5jJTOa/UaxzE+MIrhYBv/EwGtUeJh1JuzdHQJrjT69wPE2NSSaC04\noK8Jm6RMkOKTchoqy5bjy+KCSaqB7Ad2F5SyWdqjOR7IdTJJBHsWskbx+39Z\nfokZBe6jjcO/qQs0H4B3zv5uyx7ivgBZFaEV++zhesgu4x+gEsZqGFdFpTaR\nLCbZPsWen1IfQcIGH727x67EGRQLI3zFhhsGHHmfsGjWNMsf/QCUf8zXLfPK\n1fUOoJRlExZLrEgSGXJMBpcbooNl6qdpvwydC/5QjQZp5pIt9J5zb2gl57ud\nZ0IizakxiYCw/P67pGPZtZBPcb51R3rpscnGD76Eg2Jg9VRXmIOI/b0Hut2S\nEzmPbC8ISb1B/Zj4mI2daN8ZM5IEqnIaiQ4ucAErVo5sOZlvor35FRvWo8om\n2J1hrni9k/VlnmxFHfl3sBUdTvnSpfJsIthYDMkTkAheSqvzZTsCrcm0cPzQ\nNQ8qH7jzuN5OClkokVZmOXgOle2ezSkOVLU2XYqdssBrOZiMMDhg2incYhHV\nk3rE\r\n=zbiO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH1CI4//a7VMZHOObnikZSyHd6Fc9WPm0l8l1hF4nmf4CIC4sr9UubEq7NbKdW0t0fgDZE9Wkx2LTUj8MQS5/m2bE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.e5efdcc0.0_1627493006601_0.0035304204171846543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-select","version":"0.23.0-canary.ab310900.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/floating-label":"=13.0.0-canary.ae85f7eba.0","@material/line-ripple":"=13.0.0-canary.ae85f7eba.0","@material/list":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-floating-label":"0.23.0-canary.ab310900.0","@material/mwc-icon":"0.23.0-canary.ab310900.0","@material/mwc-line-ripple":"0.23.0-canary.ab310900.0","@material/mwc-list":"0.23.0-canary.ab310900.0","@material/mwc-menu":"0.23.0-canary.ab310900.0","@material/mwc-notched-outline":"0.23.0-canary.ab310900.0","@material/select":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5iPnpXOShDAKZ3AJW+/M0+jtdwvkt8+fgldRojlKdeTs7YXWJw+JCdsUcdvK2jeTlS01SbKX8TNwC5fSAJppnA==","shasum":"5feca56d483adda8d8754f3adb6241c4d5a7a8f3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.ab310900.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbx2CRA9TVsSAnZWagAAaQgP/iSHaniwqg0d0mVxKNyf\nXq4Yp4Ni4kqMPqMTy/sa+6DOdXHWtH6wDmIhOLmL/EVRvk9ZEVCDsltEAWUZ\n7hg0/bCdlTFID3D4msUv7yx0yJcYc9qcgDELuYBrSTyLOAefQLXky5TJMeNd\nC7V30tqM04k+zvvC1kAQ3bQ6DPfTUh9+vrvr2LDHYRpsPPx4JTNP+BkUMLgg\nyDzfU7cS3iFU4q0oVhRIXOUw6m6/ote5//qetkimhvDkNShTgT111poMjfsS\n0Mq1aT4zftTuGmIESbaDgTEQCHNmkpdk19O5OFbSbeMx1s4Q67HJyl8dBFu/\n2aHbYHzt9iS3YjWhuWBwvZubY9NNhD4b82QR6t/TnW+FbZb8bbUu24ON5cQ6\nDQF9TkDU1wBo6VrPWXh7DQ7QkB9zvjbdOJ/1K/QuZRAnadQQolvdx242he7w\new3/SfRxK8j4spvlOjkdcOHAyRV4zqjGip/G9bbMyfrHaRMAS2bfRST1v/MZ\nvvSywHldFNB2nAcmWxE1b7LSu8Aw9U8QX/+99LMdFkMSCAcqlBxZAE5vYxWm\nfL4EhAurcu2YY0t12Qte/nTdRBU7cMvV+Kknk9+gCsMmGp6WczCXTAk3xokp\no1AgI7J2fuv2GTdfWXFjHz88XrLOkZ6m3Ilkc2lBMIrQJgTH+zNKsmZ22Y6C\nbqQC\r\n=z4Jg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU/N8EH1P0Rpdp53Zmz9nbIyOK722T8l2xSXwWz9i6VAIhAK8QzluhzttKgHr41KbIBh8Q+6sqt1UCZp/hJjlIZOKe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.ab310900.0_1627503734022_0.967557054711502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-select","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/floating-label":"=13.0.0-canary.ae85f7eba.0","@material/line-ripple":"=13.0.0-canary.ae85f7eba.0","@material/list":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-floating-label":"0.23.0-canary.21dc9bc5.0","@material/mwc-icon":"0.23.0-canary.21dc9bc5.0","@material/mwc-line-ripple":"0.23.0-canary.21dc9bc5.0","@material/mwc-list":"0.23.0-canary.21dc9bc5.0","@material/mwc-menu":"0.23.0-canary.21dc9bc5.0","@material/mwc-notched-outline":"0.23.0-canary.21dc9bc5.0","@material/select":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c5/X36i2axgRlXKWfZUS8HF9Mar/feUvNdlPZit+nbb9aSevKQhRQSxuxzMqbU1R6ASSXUX4JIt2wf7CXOe13g==","shasum":"6707800524d6a3a2b5d879b9fedb7040ff285442","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.21dc9bc5.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb2SCRA9TVsSAnZWagAAleMP/2cz0cQ9BynWFuFW2Ui1\nR8zJS0N26zOdiV0HFG5aE6J1r95NKxS2g2uPaVbGq9hes0dvB1SwocLOaM6V\nhMtyXjznFvq9woxjXVvic/kiyyaEWCmRYlVMuDI+vRVu1KlRvMe1weIBh//K\nK3+lmTIIad8JE/i3dLDUd1qJikJto+C1sk7zAVLohJ0Ki2k5zHbGCkXkEQrp\nKpnVePL0u/VFp5cnoPrwn7gzrYCc7obJaHZJI37uVBq4O3fvaRo2b+NRbfbd\naXRUufKJAyMMPWPZDHDM6iwYXyE6PS0iiypM2PBOEpf12DSpwuMnB5M2OP6f\nJT99iV5mYu13ERANuWYDM0RdAlY7+TjxtZx+q5sduVSSdaBbOCa8aUzf7WcT\nZZRnvYz1vauOGTp69gpgRBoTmw6fitIjllNPGApwhZvCE3DcBSlZONlr12Cg\nozXX7TeBSci2w57OIeSkeHvA+VgeFukvLPbuZ04xBGGJGVaNhnOhrxx/R5ci\nfrNYJ6yXvNJYH8yx1lV6t09tJ3YOGp7bDL3IvHp2aQ+fFlAlivDurq3jPKjA\n7hxT988ZOrmnH/UNQUUf9lbRZ/9iw99DytAPDdlSEgKS+tI2pg+9KYPfVmCR\ndS72mle3DS5OfoUiWaHOlwEHfB1lUaZm2jSHdC9DSxngpJRE0aQEx4i3Lp2s\nsIn0\r\n=ICoc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVaq6AddirCCZ0AFexN2zWBuZe62FBQ49D5xb45NKR2gIhAPDKc2KtxJV95R3aVtn4wjEmEUZ5HGta6AS28nDVCOFt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.21dc9bc5.0_1627504018491_0.32105678520826153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-select","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/floating-label":"=13.0.0-canary.ae85f7eba.0","@material/line-ripple":"=13.0.0-canary.ae85f7eba.0","@material/list":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-floating-label":"0.23.0-canary.68c7fe5c.0","@material/mwc-icon":"0.23.0-canary.68c7fe5c.0","@material/mwc-line-ripple":"0.23.0-canary.68c7fe5c.0","@material/mwc-list":"0.23.0-canary.68c7fe5c.0","@material/mwc-menu":"0.23.0-canary.68c7fe5c.0","@material/mwc-notched-outline":"0.23.0-canary.68c7fe5c.0","@material/select":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KDLTiBYP0YTDqdpSjyVNYL4v537DFKMvYrWgkmnwnlX5XomuRoAH3gOAocdKCRmALA0ASoc5u5h2nWzqvPXk8A==","shasum":"995362c1c61b80c922ae1a36dceb0a2f49f6ec11","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.68c7fe5c.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvRNCRA9TVsSAnZWagAA6BsP/34dwh+vbCB3GTzTyu0E\nJOrwe8v9LcMjp/EG0jNtLjsgGzXxAeysbJmP23725VnhcKFAs/44lzCHaMSR\nUzlZgBcPz0wEHySAfHqYwBkHuS/XXx+NBvHlwwawYB+d6+ukASZpSsy0mziZ\n2vP+aqM3+h+QEsCZjihq7/nzGG4bC44yKM7lqw8Mp/FZkpIWnGi9/96vtxGK\nrljtSYFWTgvpjUQ68jg9edG/KfP3d3zH2CHo/P/AJlY+W4snzOajrtPFUjuR\npqDhG9zoEArq6id0EHswCToecADGdDcimI6RgCOt/8lNC9YAWEwcJ+gI3/F9\nm0WHGEUnA/KgQUUWZ57QSgG3ksUwbLRouZGAzRYzU2QgLUrXNhiVvvtQkqm1\nQOJFswa0fGrO6HNN2nJuuGu3RAh4u1ceIlgC1Aape/I8fJiALRmVAt/5fKM7\nNVm8cQeETIDMX0AxcOYquBFgdfYSWl+KmQs/L1P14ZL22Hsg9D5NH6dT0THE\nzQ4K9PvBAjXF3KCf/CG1atvunLZRG8tbmWDtirOU7xW3+1u6bDOj1AXIyniu\nfoXvhFtOMduCL3AcSgSr2uEzRtYYwgMV4qhBESBGf1NsDotvXxfOiruTAjG/\nEK6j7b2zhTXNMz8wSdvoHFyt2SAMluYTvCH7voth/AsmPDkW7oBGtDtKA+gd\n+zUW\r\n=M1Et\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDslxZl3fQ/SAzKHUoF32unXG8E0FuL+93b54WamZKYWQIgLwN5knJCVwT2gJx03pEwq7bc+E2q7NaOA6BMAMbzfeM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.68c7fe5c.0_1627583564953_0.9839056884802471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-select","version":"0.23.0-canary.aebe39e8.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/floating-label":"=13.0.0-canary.ae85f7eba.0","@material/line-ripple":"=13.0.0-canary.ae85f7eba.0","@material/list":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-floating-label":"0.23.0-canary.aebe39e8.0","@material/mwc-icon":"0.23.0-canary.aebe39e8.0","@material/mwc-line-ripple":"0.23.0-canary.aebe39e8.0","@material/mwc-list":"0.23.0-canary.aebe39e8.0","@material/mwc-menu":"0.23.0-canary.aebe39e8.0","@material/mwc-notched-outline":"0.23.0-canary.aebe39e8.0","@material/select":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lq04cLAc3I852LTVch/pSAP2EMjMRv/w7N9msbwKNolSiMZR3wpUya+Qr3GquUFyIGCY3cP/k5TBIlMgx2Pnug==","shasum":"6218422e4d1d1f90f665db372dace281f2b2ad64","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.aebe39e8.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE+cCRA9TVsSAnZWagAATd4QAIdRN+VQ2JMl1x+jUrYl\nCG7hIVmBFqwx5Tzc4Mie39AB3OF0sjjeqhCsU7CuCHtrt9FOn1iedgXThtBd\n+dAfJ4Ng/BGIdcD5XTuZEq5L6Y0+howhLtnO1dcCl9ipnkiMRuBepZT8OwB1\niwV1+LHb5hLEdFS5qOoPak5jAPmrUXqd8QQWyRL/S0OLLxvO25Oju/T8Nr7a\nsjnsu+fAqjGGC9VwsCv+GGCQdMBKM777GrQxhwEQ+HKqcFERTTD5aGdMxaM6\nb7iVo3u0UQSP1Y0Cio0miEw1b/By8xxjIqJXDjdblkrEXeaj8wVA4VCTsG/H\nkBwBHx/hSA0PJoWddMyAoBRsB2uYVzh9X39H79EEWL5S+6XF/XpmmjGpkWJr\nQxjmSLx5o/ry69L38833SZFVcNXhnLfn7j4qRovKMa2w82N41P+KODc3q5Gm\nDJk4xt0pYfNibSRFyxn8a8BB9WbWqx04dSrcGxnaWYKhWtILPC2M+N5A+xQY\nfWSrKMFvXUd6sr8cNWWTZ9VUuncgq+oe7s0HAXiAyZ3LpSqWwUleRf6af062\nbEk1mtAm23Q1AUtTKmANCSbfLTyPZjmSRjC14o+45ZLjCmd6R+pwCgqVSWVT\nl4QhWixre3I9Br6wmibIWkF5+5SZ1I+5SJGbnqfIrdZCy/OOBTlmb8ukj3TQ\nccsj\r\n=8JEB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaW9zKMMm4FhQNHi85HtnUfgFhe1D4Rk0p5mih3ZQRcAIhALDdUnVCETubXJ8h8hK4iUFd3g0qnIHR9q9I6tfNisUO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.aebe39e8.0_1627672476255_0.6750159602970169"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-select","version":"0.23.0-canary.ea889c69.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.cc5377458.0","@material/floating-label":"=13.0.0-canary.cc5377458.0","@material/line-ripple":"=13.0.0-canary.cc5377458.0","@material/list":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-floating-label":"0.23.0-canary.ea889c69.0","@material/mwc-icon":"0.23.0-canary.ea889c69.0","@material/mwc-line-ripple":"0.23.0-canary.ea889c69.0","@material/mwc-list":"0.23.0-canary.ea889c69.0","@material/mwc-menu":"0.23.0-canary.ea889c69.0","@material/mwc-notched-outline":"0.23.0-canary.ea889c69.0","@material/select":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oz/Ar4J/JtsaUBteUwQbmuXNwW3/wqbDKKtammqdSw4uYC1DawUz91inHoHmmsyW7pgvi6WYc9qFNPnGPa95/Q==","shasum":"de98add1852bf5c37ec71a7d6b989bed87d0672b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.ea889c69.0.tgz","fileCount":13,"unpackedSize":204760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY+BCRA9TVsSAnZWagAAAPcP/0FBk8a4YMR4lJI753LO\nYLe1XJGc02RTbflFz7qo5nEh0cBxnboSBMglacvIokSRTdhS+EbTlQWvfVWq\n5WGzjw4qCL1CHusZJnisBOQh3SKPy1NLhIAUJtE602oktXYos+jRotc7pp27\niirR+H8WIMZbMhF6QgOcZyeOJq7yy/IlQOTW89hePoYvrAXwrRdzezm7UsME\n1oX8TvTXSo2OfmYAJLz3sOIMpJRxMYYP8iz7QTS60liQmjLjLIFjVth0sXS4\n96YYVCV7MzScAgWxDryDVJ+9BE8wADKI68j1iP9CFmTSdx/KyiTBz4N10QnZ\n22kdGKshi94oAy7ovwGTp1o+blJ5clfPDekBYsrvzYDS6b3n/+O58VBsqA7i\nalhmHBHzmoPWHFPZAxej5o6GHSbBR0L+LagyqyOLj9hetjsAc6tjkw2vNnrT\nd0NPzzisA7XkBhIfEVAgynbEGZ0T7TicEB6KZrIOMRNtgYRjVKc0yf93kGov\npOWzwf1oh+bpynDbdQcl23E+auz2h0GJpyGEuy1dN1V0c9FNP5jr2KwaSbhJ\nanLBtgcadMhVRNyvYbCi1pKZ2khlYAZZc5+OLVcIVfmvT3zuhW6n9DBj5emU\nOksKLRn/SC+Z2zdJK/8KlM9tqC8R6zRr2L+sIw1VP5A5fYYJWFyXPtkHwmG7\na2qx\r\n=jtCs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzfgv+FGgEMqbAB8vDpzs0NERPtW2zb41sDB0ATcc7DAiAGnBAKMpexRQxksOyJtUuHDyFsVOCScasxDjWnbEb+Ww=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.ea889c69.0_1628016513115_0.7546332647260863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-select","version":"0.23.0-canary.21918905.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.cc5377458.0","@material/floating-label":"=13.0.0-canary.cc5377458.0","@material/line-ripple":"=13.0.0-canary.cc5377458.0","@material/list":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-floating-label":"0.23.0-canary.21918905.0","@material/mwc-icon":"0.23.0-canary.21918905.0","@material/mwc-line-ripple":"0.23.0-canary.21918905.0","@material/mwc-list":"0.23.0-canary.21918905.0","@material/mwc-menu":"0.23.0-canary.21918905.0","@material/mwc-notched-outline":"0.23.0-canary.21918905.0","@material/select":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+Dl6wJKm3AD56XWH5chhyGJYLnYkId1x158A9hEjeIt1Gjdb98wTAop/Fd9XrhwJgtIdvDhf+55yFKa3XFLVnA==","shasum":"cdd19227b828ae7cf63d192e8a0083051551fb27","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.21918905.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbHlCRA9TVsSAnZWagAAwDMP/jdJISPzM/+993T6ZIoN\nELHFijTgrkch4p0P8Bdw4+ErWUQp64CYK9pTlZxyptqEx6AiSP7Dtc1aNwV5\nzJ9Txu6pqTcbgTg3TTYYiSOiQ4GXZTUTy9KLpSK1PsIeDkEVU13ZkQNx5eXe\n5UFxnYHFNpmKIFiDrvSQVyHORdopKpKog0xX2HpU/K8W6/UWg5Nt/RCffuCm\nN7XOCwrfn/bAgBeAiqeqFfsvYO7+MDT4XV19RHFukRTWBkwPw9RwVPQ0Eodk\nHdp8LgGevQENzH0Q8ZSoqCdCrxDWy5cAtqgZ90T2cF9EH0ELHNzAq7itdD/z\nvVGrO3ULhpoIqyUymV4cVEmHwzrWlIAcwcVAQDN9+/5oT3RoZLYwPjBu6Z7J\nIjlmaNHm0cPmJ7UTGyHA2VILQWNs+YeqT36l5ib75967HSdZqRjy1GXKhtgf\nPAjEjeFTdWqWCEswTi0JhD46lbtHegvcYNNSlbtenZwN1Dvj4DhyGKRfaBH9\ngHK4s+WhA+dWQBTjQoleMTlWWCAndI5W1WYN/ufkwrKhmv0eSkiQkl2xKDwl\nzyJyqbMHwTXVcJYTHxRsQ7+i14+Fzsnn0qzA15X5AKkGzneplmpT82MsFRMf\ntflAiDzxEQYc/TDpeN7WcaN1+TL9GkXJ4hz1B8YR5oCwI5/rs9jilIexo3N5\n7q88\r\n=Z0EI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHx51v0XDD0AjOeknG+/1TDu2GU6oVDbE7h/BnCtNlEGAiAH3yQJE5USHnWCKfHoe/qMoZBqi52FxFt3kTxDC1bmoQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.21918905.0_1628025317608_0.1994160510327634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-select","version":"0.23.0-canary.193c87be.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7c96e6b98.0","@material/floating-label":"=13.0.0-canary.7c96e6b98.0","@material/line-ripple":"=13.0.0-canary.7c96e6b98.0","@material/list":"=13.0.0-canary.7c96e6b98.0","@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-floating-label":"0.23.0-canary.193c87be.0","@material/mwc-icon":"0.23.0-canary.193c87be.0","@material/mwc-line-ripple":"0.23.0-canary.193c87be.0","@material/mwc-list":"0.23.0-canary.193c87be.0","@material/mwc-menu":"0.23.0-canary.193c87be.0","@material/mwc-notched-outline":"0.23.0-canary.193c87be.0","@material/select":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7c96e6b98.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LohWMWQ/ItCorpO+BOq8bhD2d6OdjWKJ49iBuuE4mg/HMrUBEJWWgSsn84DWhUnD1Ehad/Yu20W+zkux8QRhHw==","shasum":"007bb2738e5f145c3b0c7ef82919edd235c4003d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.193c87be.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtefCRA9TVsSAnZWagAArtsP/ArgXYdAvsi5suFg81tY\nHlTkyj1RhZ+WeQU3NpYGzPl1Au6ciMLSiPvDId3cLSkHq+cyodsgMyDulZO2\ngUcNZgI5ER+kQ33/vvv7QUx13Qibf3Iu++doYIdGGA6Lkp8VELW9fSK1nxNc\nXS1Dd/OsJ9Amdsty4QwwYhTeabQ//NL4dH4obrlNsMzLkGk0/dClwinzbtlW\nX1XrLO11Q5XZy7RrrDccO3T24ChmMWxvEpuMBbDwanR0d2oaypL4667D9riQ\nKWlH9JWh41SMdn89CH+VIVtTp+0f4HTv1klSShlvUs7vgTezcqo68kZYVHKQ\nDRZq6I15F9SBQq0DFXZNHvLIGU7M626tdBfziMEk3/OT1YzMgYjEJzOPRvTg\n2tl7YCifV6T+EcM3r573q517gt7wewtr1q8ZVzwm60nVeuGP/5BTFyXc2C7r\nk5yNu/tg/mSX/0LRFNDMD2PWqHqV/j5VGjXzFANk64gAndhzEq2z87d5TRpP\nQ/Z8ZEAYU/0hju0CYlp2kRbWeLvD0rH/pVoKEwkEoUJieK88A+cInjMebiSb\nLXrUpkHrHQzvfMYSLE88iaKIRUY3MPokWtW2I65Ht9SswK8sF10fmkeHsFwf\nqebWVXriqgm5Hm5Ug6lnfYMWBrRuzBkOqpicFSU3WbPiueHmxFWEPX36vbko\nddHB\r\n=sVKY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh8vG5kkMWRVpyhxyAd1kbE5xEkcy9PokJTbcL47Z7xQIgBpDsosgLGGzqTjR0NP+k4Bi2AJy2khOdr7qXKBAclA4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.193c87be.0_1628100511478_0.006588285993197163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-select","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.3dd611091.0","@material/floating-label":"=13.0.0-canary.3dd611091.0","@material/line-ripple":"=13.0.0-canary.3dd611091.0","@material/list":"=13.0.0-canary.3dd611091.0","@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-floating-label":"0.23.0-canary.6fc52d8b.0","@material/mwc-icon":"0.23.0-canary.6fc52d8b.0","@material/mwc-line-ripple":"0.23.0-canary.6fc52d8b.0","@material/mwc-list":"0.23.0-canary.6fc52d8b.0","@material/mwc-menu":"0.23.0-canary.6fc52d8b.0","@material/mwc-notched-outline":"0.23.0-canary.6fc52d8b.0","@material/select":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.3dd611091.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dI3dKbNUXrf4nPB9D5DDPkHro1sGgqDDiqijfSpqsI8ZeyejKyrXx1kNiS9nbJkXK2AyUtzTQ2SjJF2PwqQTbQ==","shasum":"861935410a3c2fbe67351b8bbd7341e90770ef86","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.6fc52d8b.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCndCRA9TVsSAnZWagAA0WQP/383by0hpf8wlNaGDoqX\n0XOhDKlNkCHgUxAW1Dcox9scpcWUtZaDuxvv4Wfj4+b1/4qJpjajdUF3A2Rd\nD9Xa9X4MEBNlkkalQab1nkR8BJjU/siFI3Mqn2n2S/72meqUxogmoMt2yG6V\nVh1jJTbKSiv8pUfHLfXThWjEYN2ttJg7ohQs7+tn66Cgy8AYJRkxd18lYZ4K\nsLkQ5GxICAbzG5ee0iFTFotoZhb6agTfhzgGkWhTWUBDAm2m7wcdpsIncaDH\nljO4lBQ7VL18hoUilmqifc9DUP57spsOv2cKmv3TrxckN3cPBeAicTmJMuGG\n14VVJyFfrTor28Bq/FT/xdKzgvTi/ip2HsjPBAB5v1IHZXJ8Nrkwt/CqPMHx\nNkvYgegRA1MX4BARi8zWK/bLqzkVDaaW7Z5xwSXDfrbiocm4aBhpa9VGk8dK\nbGTeabIyGrRhzUx8/K74tpyIyMDbZmY8yknaZOas3yaTc2QBW+WAtAm5hBrl\nIDq+VGFwgnrgE9LHeidUJVHySWDGDBaF+Z8LPw6jzenipKfr34Jb+gdPjW3A\nDzyuEFxIRotoxvDHlfXDxBP4rmtSOmntIsTP9csoX12todnRjPVFPHQwq0I0\n7fR3cV3+jT17mKK1JsbOBRxIQd4sNTSx8EA6CcBNDivl24q4QRLV9shyGYIG\nhexM\r\n=SHZF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWQjLeYkoEtN6VbGSIegkMDQBdHbU+Bgn+xf54Fm636AiAg5mthM7kS33ShSCw+RvW951VTBtLRaArBF7XPMz0c0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.6fc52d8b.0_1628187101757_0.6490331084803596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-select","version":"0.23.0-canary.e2e9777d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/floating-label":"=13.0.0-canary.b47dd37a6.0","@material/line-ripple":"=13.0.0-canary.b47dd37a6.0","@material/list":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-floating-label":"0.23.0-canary.e2e9777d.0","@material/mwc-icon":"0.23.0-canary.e2e9777d.0","@material/mwc-line-ripple":"0.23.0-canary.e2e9777d.0","@material/mwc-list":"0.23.0-canary.e2e9777d.0","@material/mwc-menu":"0.23.0-canary.e2e9777d.0","@material/mwc-notched-outline":"0.23.0-canary.e2e9777d.0","@material/select":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JSf8/U6TvvJeEbSv/rkmOPsjzg7tu50z8AfZ/c0pl7o4cznUH1yItGzs7yVmboMh8RdA1buP9NJ1ie4oaNw85Q==","shasum":"e712459311a67b46ac5fb18157b0036f373c8392","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.e2e9777d.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqyCRA9TVsSAnZWagAAlmMP/2ulv1mc1Wg7Gq3uM56m\ngK9r+ExG9prk3LGK6Vp2rOtSDuOtxycUhUFgwSmWtipl2+DC9juc7FJ8z4Kw\nFsh1GsXejOYPYhAMIoQaPb4FCvI87Pnoq2Pd2YBfAsYCw31jzM57q2iDZDuG\neC6Fro25xctPI7SAW3IalcvhqDNLAzw8NASLP+vOeaqfSGNoYCSvQugdZIBo\nLRAEXSXlJ3z37AbrHuEMYRZ87CiTVtVOD3UyM+gtj8AHWU/sLo1yop05JnLC\nUgEneB1zwuW3Pep9T/BislncdhPARF181Pu9zDTq3sj61AbhrxZ0PMuAgnLo\nqQgaWJdHShD/8isIZtbo1Xqhszr4AybeUr3UYAxV+KZcmZbn6ADgcj+X42ze\n4nidB+ugkv2Bu1/R2zaLASHmYU1sOiDhNVEPytuZNoFQZJLtUFp+aAbTv9yp\negXj8XBSWWQC53JmVK1Pw+/owp7HZTMti/iSXSLw4+3bFViQyJCzG6M+AuPk\nKoAKstGMpTJ1FHnaJliDhgZPPE3ht3+HIfwUkQKHO5G5TChJA1DeN6RXzAC+\nwUbMTS0mLdF5H1FfqJzwmEMjfR15iVMuz8+vBodOIYYLSpMCH9/wxjgFfMog\n3V1ERwNDBNS57FRWRPe2MFQMOK8SlwDGitIyiD+MBF/aXmgnVayqd+lgmEyR\npnyt\r\n=BSZQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH+UODOszACNwFM1/JxD3HtFF1mjgUM66ATFfES/3l4VAiEAqYiw/Vx7kKxMVsWbgswW+Cr1olyxQcp2ImncVIGTdO0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.e2e9777d.0_1628203697968_0.7573051186691011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-select","version":"0.23.0-canary.72ff1e68.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/floating-label":"=13.0.0-canary.b47dd37a6.0","@material/line-ripple":"=13.0.0-canary.b47dd37a6.0","@material/list":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-floating-label":"0.23.0-canary.72ff1e68.0","@material/mwc-icon":"0.23.0-canary.72ff1e68.0","@material/mwc-line-ripple":"0.23.0-canary.72ff1e68.0","@material/mwc-list":"0.23.0-canary.72ff1e68.0","@material/mwc-menu":"0.23.0-canary.72ff1e68.0","@material/mwc-notched-outline":"0.23.0-canary.72ff1e68.0","@material/select":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jsN4sipqz6lObaLAtjCLKgpPjToPzygvQjxyIkvOFI+QLhIUf/LJvuf4DgO7j5HWgX4ezIwSE97uphoHTh6Btg==","shasum":"13f7c1805a04bb9fc35c0cdbfe676b403b56f574","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.72ff1e68.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaBjCRA9TVsSAnZWagAAzmUP+wUHsfOInNokY+5kwT+X\n1pG2AB/WUCneYBWaGpEIDspNlcmesYErrufHysfAZz9wCLJjFd2+bQ0QEWo4\ngTUShOk2kxzFhGM+npwZUwqG2I/VGhnqk32HBeCi7YqzcJZxAtsYeEJsWsSE\nfu8EGhUZDA3hA6QAiMg4BN2M7IyMXh7yegpA+dbmbQkYtSXi6QruXAGibn4k\nIqM/yLwHle7aczF+xC2gDwyZRvRdMZYzPeQ0xWqZFPRmyrTgCJLpKsBRipAr\nIrB+oVrpaOKNyb1+y+in+7SlIimlbCRSYq6uYKsUIj/fOPPobniR7WR3NoGU\nwKs0NhZHZC7Stvu4zUVgDJKmeHkGaIj76dWDYDQfOhiZ/GewcEiqBafZBkPC\nfJGPIiwG2GZn0P67F9EUvwZZMtW96YT9tDxr5F8AU4aVwUstSr20Vbbp5cr+\nnSzIocQ99eh4orq3fPnY8abn7qLi6MoxDjhRxxRRkmMR5CqCeUdhBQ3cbUaa\nYmWtYCfC3FG8qlCMYfq0pxTIccdOT7pnwV21afXDwrXgtQUha2HRi23xeZoe\nEU5sdSjNo84PxfYVKhr81D02Q6NGJquzINMgQ37zp9J6RZ/2rxz0Bg4BWt0s\nzJJWXhKR8ckMUQvU2WQsa2CwR0p4rRpOHXx/BhI1U2xguSSXk3u2P7t7MPmS\nLFkf\r\n=je6d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwRFn6P4aAsRBlNAuj39YTUJiwzl09zCtisRONM90bWAiEA5WFlgnFhUrDYoTGJCeJeuiILOg7Z3XSEy2BV5Ft7yNM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.72ff1e68.0_1628282979200_0.2873621502197672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-select","version":"0.23.0-canary.c527e93b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/floating-label":"=13.0.0-canary.b47dd37a6.0","@material/line-ripple":"=13.0.0-canary.b47dd37a6.0","@material/list":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-floating-label":"0.23.0-canary.c527e93b.0","@material/mwc-icon":"0.23.0-canary.c527e93b.0","@material/mwc-line-ripple":"0.23.0-canary.c527e93b.0","@material/mwc-list":"0.23.0-canary.c527e93b.0","@material/mwc-menu":"0.23.0-canary.c527e93b.0","@material/mwc-notched-outline":"0.23.0-canary.c527e93b.0","@material/select":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-llHRjEc8Qu3r2OoVZFH7EC0WYL27Hu+KWjPJ/izHfxjhSjJMftESrVzdqKQd0RNKAlzmWjQ7ckQOm35PhNe1hQ==","shasum":"a48fbcaa5aa9591cb4e441cf5e7139e9a402d183","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.c527e93b.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaV6CRA9TVsSAnZWagAA5ccP/0RPlD4ZMTcZjpQzgOFG\nF7uGNIc5IDbDReB9JEJX6yvubppzAGDhRq27yp3+b27Ke/WxMgTm896jt72h\niP32CSVZ7dQLGkiZbYwoIY1vprAQjSZnruXe2hE4CkpsnmcAQFc9q3uEj+/5\nZxLKX4ZSpeq88uZcTX+Z3XcnlTLFsYaeW3FdzjApGul63SNYdDHOyRWxZfUS\n+Vo5cMbbcs+0XsqWAsWAJ4+LHD0KOQ50SSrMeKCiAfeHNVEDniLfQ9qB+aLJ\n+/rPRPMzz8oFHnv3Qec/tO77ozoEy/QBeDyv7HoHBLB2WygbgUqJApvf9xVT\nlz3bxnwEglfMUMXnN+h/nMFcgtEtE+TOnlUg0nzalclIKP9Mre3YwJ6diBtg\nITbAqh3H6SgLdVAAVXXlyxXEgeSyGGjhBqxOsG2Z+5sE/GYK9vQUOTtWrOyl\nlQrHrvGcn7jiWPjGctPLacTC9GDzaStrXmaqFzuNYhtekSImmBwjCnr0EnLo\nf1zXR5y2Rr+XQKvuDh8SO6TFU9dMZLa0iMTuhVc9/eGMfXfzFOhUj4OARuQC\njX5KpWM+sa74CSVJJShakac7JUXJ9l7x8OyEaNQuJEcJlOsDw8SVfCop+/hd\ns+Gd8Hr651XSfTUPyFR6lKpU16/2xUoKCxisDp0eTA4hsOXhytBq6DrBIC7m\n9jpI\r\n=sJRS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw5elOsiZoLf4+fQ537NHgoc8A/v+paLHl5xrgtINlNgIgDrZJMP30EtVEbiIFQ6mOdAU5ngLm6CzDIO4p0nQtblA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.c527e93b.0_1628284281847_0.45355465313568954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-select","version":"0.23.0-canary.78b1eaac.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/floating-label":"=13.0.0-canary.b47dd37a6.0","@material/line-ripple":"=13.0.0-canary.b47dd37a6.0","@material/list":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-floating-label":"0.23.0-canary.78b1eaac.0","@material/mwc-icon":"0.23.0-canary.78b1eaac.0","@material/mwc-line-ripple":"0.23.0-canary.78b1eaac.0","@material/mwc-list":"0.23.0-canary.78b1eaac.0","@material/mwc-menu":"0.23.0-canary.78b1eaac.0","@material/mwc-notched-outline":"0.23.0-canary.78b1eaac.0","@material/select":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-p51hAvEhAQqVDOEIYFFoUrnohglEeH9eXGIu78yfH3HNMJ+oBObOnBpSHrcchLJBiKQ7CHe36O8ZX3um2QkwzA==","shasum":"0120e57088982c74a36d6fb634e75543b11553bb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.78b1eaac.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW45CRA9TVsSAnZWagAAmQ0P/1poKINy1ZmVYb6fCVeK\n4Bkdj7HOROV2zHNFUbEigVgT6r+zR9MRKPvJcEUpehnqdA1MyZpLu+1W1IOv\n2o0TQcj0fZrJf918PTmQv3gYg6dVqsdYc4ikFDa1I5zX1mdfj0GaibRk/q/M\nFO7Mg0NX3OpGXmtQvud8ZyjTnmZjR1zghAx63Yr0QoVnrrgdgRQZudtJxjnr\nzzwCR0SxMdWusLu6hoFpras4eyVB7XksjL5z/0vW8HdOBd4bTRFzh7f85U0P\nQF2j8qJglo1aMOxuzDgYv4OQ0XrwMsGcaz8Hs5NroNGVO7T4TZ4IdBJGEAdq\nJfJkFdVBCYdiLHw2X4lNIQ5tDwxA8gAjc1ZodvhNc0KhyebwIplst7ci2WmF\n88fFggYGAMFPRlFHw78LT27ss7nfMegzRRuVVvJHjR3JAfI3hqoSn3I/Hb/g\n76Q6zpa5kvpuZe3wAXuscj5qBovZcsSpILaVphj4dWanS3m1X8NUySQ90E/R\nKT+KuaoktJ/2fE8eqZlAvW4gM8IQlXwlJ75wbZZcRU4fIm0yrDCGUmO+VwXB\n+5nx/nSilBcl8fJhDNefsxksTIRUZReTjYwN+fJWTunsWXO/m1B2SVtEfq4Y\nut9Od2351ijZi5w5cl6ifFRzW+EPq+3Yl1Nr2c7gzIO8G7CyEIpMrmbUATl1\neZnm\r\n=h0dg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnGTHAm7+K0a3ym7WLoK2LPr1vZY6mliFzhIRYRWwqYAiEA7lxYVxRPzWEMloyLc1SMGSQ76XH+AVvm0+cFnXws9+A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.78b1eaac.0_1628532281160_0.19773106024725484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-select","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7249a3060.0","@material/floating-label":"=13.0.0-canary.7249a3060.0","@material/line-ripple":"=13.0.0-canary.7249a3060.0","@material/list":"=13.0.0-canary.7249a3060.0","@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-floating-label":"0.23.0-canary.a8a4ddc9.0","@material/mwc-icon":"0.23.0-canary.a8a4ddc9.0","@material/mwc-line-ripple":"0.23.0-canary.a8a4ddc9.0","@material/mwc-list":"0.23.0-canary.a8a4ddc9.0","@material/mwc-menu":"0.23.0-canary.a8a4ddc9.0","@material/mwc-notched-outline":"0.23.0-canary.a8a4ddc9.0","@material/select":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7249a3060.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cI3sirVuOOy6xfZvC2gUShHdH/gSRHQQgOhoVznOdRB4nowof2OLpklnlA5dosDUdNQGVtqlyqupo8xMwTAbXQ==","shasum":"b99ca0c1554237e795221c8c7d5e80831a52b408","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsnRCRA9TVsSAnZWagAArrsQAIJKCa/iokvBKNt0jh2J\nBRQg4RMvhveN0QZzhWEUAMQUQNPbxHnAPk7Rj+KR4C0i0zGS8tKVd/gYqSVc\nU5TAFlHVKFFnaWPhlnVqFP4AtyyIGuBtg0iRhrioRANj+wcj0DQaAvZwjICS\n5PjtjOPeeld2f2+Ki36mCFZHxh9w06HnxCmW/yoOdI78xdr+wSth/f7NCJUf\n0vBFG/707PRYPoe9yms588l5Hab7Yu6u8jf7nmptsL+SThzyTy8C2LXi5kCq\ngxrAxDwqY2Up3orFLWNRQDgNTJkzEaTMWyGzvjx3nsvRTruMkzP86nDA2mxx\ndMsEtOdzbcZAYxkJ0oGhYw4y+BhSQpBhb7MOYarQPWG2Lco+IuZjx2p5e0yf\n7mvXrONre1gZIitwcyFaTPrZZPhlDljFoNKvqCurKKgORL++PjDeQxZUWcWv\nT+bVjEUxYaD4sKOhrb2kKCTlVhoWF3MgHVHeHfReiG7PHqtgB1wAxzk9DfWy\nC8YmOVD1S2q16V/WK62FvXC51hFgWZdf6X7PiVd3121+6iLIi5nfHnBiJi9g\ngpTekLmkwAFCXp9MNOMfMpeyfN4TAAHZlUgiI+YkPJbPrOiASQtRNZzWTpe1\nVOikiCL5xXozIePHeJaX3Cl4Ch8ekQNxIRo4Dvl6LyFuYR8Ph1OVY1WA8bG+\n6RsT\r\n=8C8Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6EWGXAcgnnZjYAM6LOfhQcdcMf8JYqTH/GplfvLOWFAiEAi6g0fien3R6KovsaAuF1g2wlOIuN22DeZbo5hsD8Aek="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.a8a4ddc9.0_1628621265608_0.759542578918238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-select","version":"0.23.0-canary.99fc0632.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.f4241a42a.0","@material/floating-label":"=13.0.0-canary.f4241a42a.0","@material/line-ripple":"=13.0.0-canary.f4241a42a.0","@material/list":"=13.0.0-canary.f4241a42a.0","@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-floating-label":"0.23.0-canary.99fc0632.0","@material/mwc-icon":"0.23.0-canary.99fc0632.0","@material/mwc-line-ripple":"0.23.0-canary.99fc0632.0","@material/mwc-list":"0.23.0-canary.99fc0632.0","@material/mwc-menu":"0.23.0-canary.99fc0632.0","@material/mwc-notched-outline":"0.23.0-canary.99fc0632.0","@material/select":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.f4241a42a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jeps4cbgwn5iRrfAvTMOgt2fc+IB0ZR6QLR/Gnzinq89m1rp3vkivh4hyX8UkmUN3vv0+GOfRDQbMybmbqwEUw==","shasum":"2c4cd9f07ec3431aaa3a8d84117bd88f49f70426","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.99fc0632.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE2jCRA9TVsSAnZWagAAy1MP/j2O3RTmKViaNuww7uLH\nlVawyxPx0rBcCwGWtmcR1gJxmIHjhkcKgWSRKv2lCJK8QmK3HPos4iSiavD9\n+AsgCFzhsgNtbQMceouVN2Bjo0AZcO0fzDFmvPWAEy5ZGjjRFP8b0AXnBoXE\nk6s2IFPDbBt3//ZbFUFGBp9npm5F2/GM2NFc7diqe8OkVsLw+HfAe3G0ZQBu\nmR4tddWCY3y5fxCSP0mBRgCJhmVuFe+NCFmzva62f8Mhj1dtWP4qc9Z2tsgK\nraK69IqQ4H1TKtLfEYQaWROBdY2Ii7jyDm4+z5R1RxD8pkiL3y44hSFXKsX8\n3muqYkhPTnGb58rQe0VieicWl2gr1wOaesWKY5GFW9tKOhW22nRLbkDjE+MQ\nn0fpLSJ5WA5X4HWTt6JxFE3+SarYT1aWzRjDYzjIs3Ko3zVIElxy/FKA2osf\nLk8qBYPXB/9hTujEPizz/iV1sW6z581LcZZ7XZwFe/NUVrA5CKUDWuBibLbt\nGMPAFrrfwbFMrbx0We0anPVpFShA6I+TsiDFeH4kQVdmSXuPGsEg7SGS/Bzq\nDU8HZu8hBI0UKPx5eHcmZvokbeaw/f6vRAcbzMt22BeyM0Tb+IXjnkmzUa6W\nfATzcp1l4SfzjFqT0mH8MkM6KB76KxaLoHH7LvHxsGTHyIOQqqMFdUFwyth1\njFyN\r\n=JY5Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrbAVItu8DjVIPEwb8z3+xEaBZo9HULWdwJx1/70dMvAiAW4QDDjlJPNG4shCaaRMvkwLebXuUJKCmY/ttq1bzOag=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.99fc0632.0_1628720546788_0.2679064530897233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-select","version":"0.23.0-canary.3f47ae57.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0ad12ed3c.0","@material/floating-label":"=13.0.0-canary.0ad12ed3c.0","@material/line-ripple":"=13.0.0-canary.0ad12ed3c.0","@material/list":"=13.0.0-canary.0ad12ed3c.0","@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-floating-label":"0.23.0-canary.3f47ae57.0","@material/mwc-icon":"0.23.0-canary.3f47ae57.0","@material/mwc-line-ripple":"0.23.0-canary.3f47ae57.0","@material/mwc-list":"0.23.0-canary.3f47ae57.0","@material/mwc-menu":"0.23.0-canary.3f47ae57.0","@material/mwc-notched-outline":"0.23.0-canary.3f47ae57.0","@material/select":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0ad12ed3c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rQQnjiYm6FBH3il/DmwbBv0Ij9UMfQwVqdPtbAsw3M6jzgUUJ8+2vtr+zvUcNCBPuvdSrotbgmKGcM26nzY2lw==","shasum":"c18ff6cabb8bcfb197109a73df01ed84f7e777fc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.3f47ae57.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWHVCRA9TVsSAnZWagAAw0EP/0nvWaDO8xta6/MJ+4lL\n9FawgZ/unt8+JduP5H9jHTGJmcZCLJRdP+vfD0Hnlb8qof8LK6byZqY0Z92e\n9adpr6+TUCqTesaY/G0YxCl0tEr0zBNvXn8yRp5qo/MOGW51WTAbAADq5zrS\nRonvtRxSJH7Yv/7Bk59IF9CQkt+wBjSXNe9Cn67PUE8MfMhpSxB7xBpkCmJy\niiTNJTr0aEHB8MNQ5T7D8Fqqg5CxaO1lG+UDCN+IZEc9PkiiFKpkmiULAK5M\nA1pYWmMcMxXgRivwkO2nGlvoChFWb/6gM9mQbWM5Zu41uEzpHHNGK7Gg8RHr\nDmdk6hcnhWJnh5LRZLgyO7jRVDQqOyKcsVWhG0ukToTa1uMAbgnEk5fmGZhW\n8834R3Z7x/DVTAW7yxxXRp7AAuuOfUWasjcEGy73JiV709X+qwtgH0ap/yva\n0cI2KX8FHUjxk6M56bTPjbLSeQS1rxf3kYSc6ypfV7pGiQ2GCJx9j4Wl65o9\nmOqIo98or+heL4HsVw3kOxJEXjPlCnuIjmJTqEeyh/TqDS9Z6fewXRTqewAi\nLRnsed14M6hWWsU1v3hQO5EdIUG8G5DPYhyd6sAutOE8SREwQvuohEUCBpu2\nEkQIA53LJptH4ITMTuF1QMguMHagYiVv+buhxEfJ3UUUFnKicMg0ntqpc4vb\nZdAE\r\n=pSLx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFUnS4e8dPrR68MVMNwqf/XuDX/G7IDTJZlRzin98H2SAiEA0J0iaNAI7Ks1pjzA4PkXIZ41dgvnV+U1CGRHRzZM+f0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.3f47ae57.0_1628791253312_0.4554523762899241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-select","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.077dcfcfe.0","@material/floating-label":"=13.0.0-canary.077dcfcfe.0","@material/line-ripple":"=13.0.0-canary.077dcfcfe.0","@material/list":"=13.0.0-canary.077dcfcfe.0","@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-floating-label":"0.23.0-canary.6b9bfc32.0","@material/mwc-icon":"0.23.0-canary.6b9bfc32.0","@material/mwc-line-ripple":"0.23.0-canary.6b9bfc32.0","@material/mwc-list":"0.23.0-canary.6b9bfc32.0","@material/mwc-menu":"0.23.0-canary.6b9bfc32.0","@material/mwc-notched-outline":"0.23.0-canary.6b9bfc32.0","@material/select":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.077dcfcfe.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-opA42SajItGEFjibKH6fvY5OStK9TSyOlNt2IwhI5L48c2oHs/CSkklqJ3V0Uv+zjEbv+DLlC3RTjNec9f4lbg==","shasum":"684835cad395aa8ecb437020f84be7441f6c76d5","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.6b9bfc32.0.tgz","fileCount":13,"unpackedSize":204787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWd+CRA9TVsSAnZWagAAlfIP/3/h8MRZtAs4FILBkph6\nvd9pLpAaPRYG/6Kk+udQP6//Um0pHE23v4E1WJ1RGa4TIrDkrdTjJ0r2vrJE\n05kIyUx0nH1cHLKqcn+ZUfv+VqzvTEzJ9epe9Ee13PFv7eG806L371cwpVI2\nwsOaY5QBxZxnC0a8TirCCF8gjwVIDDRUsY3o1lnFdnaf99zoUHfARBnynjdj\nHeWfzlUeUpiod/b+llq0+1jf1tPa6C2b2lTHrLSC0PQFDMKAN5AuhVRBGt8e\n1zN4QJ7nE76utrxk5a6rBbnYxgt9wR1PxiJyDWdvXHlgXcJ/6xg3KaeYlEJR\n9Wr3rDgpTQK2qYGsyE1B/jkwcMzELAiz/Kd1/jSbM/7SVwQnMaSQB60lF2Pq\njEUheO2c+05r/QyyW8PtQ73i7xkqroYv+i/tsUyIKS15dS0YfK+wrc9P6Rti\nfzuAwak2xwXCwCCxibbldPgwmb8U1e/pow+smKR6SHYcjx3Y3VPrW/8kg+wy\nywLPFz0oBoZIPVN9KIaY97l6PVBLCDkPmGadYESEb48t6iFYTx9Mye8NurlJ\nsQGJAsdfsarHKeBP6nonC1RM7ZpDSFtORdzjfTRC+7h1+dMRtXY87b0thbVf\nIMQKqozNdpkCM45gHGrD4jmNZTq5BpS+qXNT85296bZQJmJSgxWnE2l1pyzD\nXOD5\r\n=6dY8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjffgm3F+1wOAaLGchSugnX0rw85I+f2IwvTF4md1iTAiEA28dY9DPmMqgUZh31mDsZLxVnCiQVU2FxrATRI7HpUOw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.6b9bfc32.0_1628792702618_0.865160293684242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-select","version":"0.23.0-canary.c89ecc63.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.2fb068fb0.0","@material/floating-label":"=13.0.0-canary.2fb068fb0.0","@material/line-ripple":"=13.0.0-canary.2fb068fb0.0","@material/list":"=13.0.0-canary.2fb068fb0.0","@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-floating-label":"0.23.0-canary.c89ecc63.0","@material/mwc-icon":"0.23.0-canary.c89ecc63.0","@material/mwc-line-ripple":"0.23.0-canary.c89ecc63.0","@material/mwc-list":"0.23.0-canary.c89ecc63.0","@material/mwc-menu":"0.23.0-canary.c89ecc63.0","@material/mwc-notched-outline":"0.23.0-canary.c89ecc63.0","@material/select":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.2fb068fb0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3pD1pCIOP1MaHp13VwtcVfmn/Z/F0+f4dL8NDy+LEq+ggWMbZcv+AFDZA84xXh/kJGAGDp/OMTTqE7wNMgOhlw==","shasum":"09141abb22404df5aa658aee894d71ffde9b00cc","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.c89ecc63.0.tgz","fileCount":13,"unpackedSize":204765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp28CRA9TVsSAnZWagAA/OgP/A4QjA1IQBVH9HSFr5Yj\nBx2H/OO9Wt4qFcuXXJzpUPtLMGIPYhTaDDVcDyWEyXoQTfNtbrkGWleDxDD9\nvXQNafD5MHnf0FwUtEsquzcVhkPSTUo0mnlEoES2U+i6vQT0ypYPfPfYDtCn\noCflURffnmhC7XjuSUBSwTN8aPrO+O8O4UzhL5VJduigYMGVowb2h3kZetuj\nLIidPsfVADk1bL6C1P/JRnYHdJqWdFcm6Ell2oZ5hioSAdu9D4lRE+dwzh4H\npHKnpuHeoSV1W7nAFoPSYvGHX5nr1zfxbUbgV4zOWFDQsBE83WLywFRxbO1a\n+nHLk8zin095qFeI9iS9mYGoj2f+jza1ELv+U7Ff5gklG39zSaSS1RLcX/wS\nV94h6YhWyGZZxRiWh+mSPrEZsXUav8fLYVuknjzyCOGVCo9uVDT2hQt4Cup8\nHd+6oTlDQlYpKKJY53bHA/Szw1Z7KtjUoPwUccnNg+As4mpRUgEsTE7P7ye1\nbHGQKtrzzLjL8Sw8RBbK3upqlRlDw/w67iMXTtXJcfMDnxAB4CdNqt6pgoyA\nrSUeaEfBVUi7Maj73TdjjuNqCqquMvznjqn6zOEFNjWTjErKnyFTwyy/lsTT\nnRHsklThMCg3myF1ndNwrICN51s3nxLbBteBtBpaeoY/t6gxQ98qXWCDinsM\nTJfX\r\n=p4iN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCW9ETl6qHYERXmZ4M15duv/4tML/FOr/i6GYOaJtvm4QIgAU7OIA9WHCkbR3+csnrkY9TFMC81zcIl37QDD3vQ0xw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.c89ecc63.0_1629134268431_0.727389633395678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-select","version":"0.23.0-canary.59de86bd.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.457d89aad.0","@material/floating-label":"=13.0.0-canary.457d89aad.0","@material/line-ripple":"=13.0.0-canary.457d89aad.0","@material/list":"=13.0.0-canary.457d89aad.0","@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-floating-label":"0.23.0-canary.59de86bd.0","@material/mwc-icon":"0.23.0-canary.59de86bd.0","@material/mwc-line-ripple":"0.23.0-canary.59de86bd.0","@material/mwc-list":"0.23.0-canary.59de86bd.0","@material/mwc-menu":"0.23.0-canary.59de86bd.0","@material/mwc-notched-outline":"0.23.0-canary.59de86bd.0","@material/select":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.457d89aad.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VcV8CLGpwAMkicdYw+t9VqkK6o3qlgXYMqmOjrEjvSF5qdC2nwnRs8QAQ9KWj5KfbI1qiV2kS6ZCUUALVCaCAA==","shasum":"6a0d72cfb71d6684c86570ca3b70d48d0b680f73","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.59de86bd.0.tgz","fileCount":13,"unpackedSize":204765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGTECRA9TVsSAnZWagAA/O0P/A7js8zfSDAQBn1DMHuc\nPSZfa9XckPUnwGYVxLu5R8c8cubzg/4UWkEmmZzxKfShJySmjxBa7cbjiQX/\nAux4E/XZF3KiBYq37REolO6AXDfkZ/B17VTs2a6kBnZvISy0+fTGOYy/cNIf\noDq8KfBbLQr43iVd8KsUeRwJ8NyKzkz+YXCIj3sgOVWXBJ5Ju7COfdWTeJ1W\nmy81WDQssSnx1mApg/9IdhkDPUdMhGvplKSoFszzTbNDJ7p8oq84LnyM3l+D\nHIamBXsxuTGpwe2ZLbuoh9Io1Mk4F+95XphCeWUgBRTy1cm/KQt+c32DrlJd\nenGoIFNQYt+Wx8w1S0SKzD7Xps7FpORbnqgt+mGChxIuZEr4RuEk4M001OGY\nFIhJoXrjjbSS0DasLlb5LA6dX2l/kZa/P44ao56tGAf6ZN/ZOSYFqbpTW94G\nYWB9qyOMUIf8aqvQJRp+BdKMxOdevHkmNK2n7og9sf6hwbDBxArfadEgBP2h\nL3DbSHKnlNRMUKnYkxnE5Nbqzm13hOL+7VPVpG3rYGuxN068StzpCZ2GTuLu\noh4LuxcsRaQAHdTUVzlOUexnWWLc0YkMQamauh7kvcyHpz+lIHOEBexsZuf8\nMGSLiekabUrmsKXkOzfL4vy0Z2E/fgOqZ94BDn6oyqORYb/GUjWh8/s38Lsn\nGjXt\r\n=sxTK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsHjH3r+9RXarpi+hq8E0C41ZxI1npiW+0uTfESvGJ8AIgRviLceS3xhhlP0qRoVLC4morggRJUwW24Ee7xog6mJE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.59de86bd.0_1629250755796_0.5989103677818108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-select","version":"0.23.0-canary.dcda879b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/floating-label":"=13.0.0-canary.43d2eed2a.0","@material/line-ripple":"=13.0.0-canary.43d2eed2a.0","@material/list":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-floating-label":"0.23.0-canary.dcda879b.0","@material/mwc-icon":"0.23.0-canary.dcda879b.0","@material/mwc-line-ripple":"0.23.0-canary.dcda879b.0","@material/mwc-list":"0.23.0-canary.dcda879b.0","@material/mwc-menu":"0.23.0-canary.dcda879b.0","@material/mwc-notched-outline":"0.23.0-canary.dcda879b.0","@material/select":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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-components-web-components/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-components-web-components/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.\n`icon` | `string` | `\"\"` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic=\"icon\"` or `graphic=\"avatar\"` to be set.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`validityTransform` | `ValidityTransform`**\\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#validation) for more details.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HB4qp1a+PcRnU7XSDKRQv6GyadmBXB/Xf6E/ZYhaNQRMCs8ZpDpkeOZ+SZW3CAy01/vBTYIdKgMLHdYN3jPASw==","shasum":"0a70ae5cfb2ec1545aa25d74f3c3d27bdc5191d0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.dcda879b.0.tgz","fileCount":13,"unpackedSize":204765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYiHCRA9TVsSAnZWagAA3dQQAIV70TjZU6qtL6Y75Zsl\nrXbyJmuM6qN37T2GP0Kpl+zMHyKLoPla+6Fc2CgpfCbS+g1AEyNV0mtiB6Ij\nB80tnUveDr7VDAwnXGaduui5PW39OH2PfWie3qj4vDglwuX25/dCTFiaj1ZP\nHd3WXCsb0VyCGxeyL0GOVMaOL3p5i8Tdh/VA9uuPlVhcek6zDj4avWuny03O\nUwomb583L+t/S3QyxOaheVq8QXDuQS+JgiZ796f+713Ni2tgmFAiKiRCi64T\nuAQU7wVn8KG5jZLlpe+aFWKaEnR/0mQFf6dnXBbo6MewhLneX8+3JEA3H/nc\nd0ZlEvIf3Ndu48MTqFfUXyiX9yrskrzg9Y5fsiTBRr2vaRE3B4FUDAZav3DK\nLijNuZdNfci9i5VhQrCe62H3Hb9flTxq6cderRAtkxDVou3EpNEDvQbEpGsD\nHtbhUKb7bVI3BeQiZf0kMuqQOQ/lpaGO9Sn69y5dHt2npsw3Owyyo9ImEimd\nd8B75/VXvDJiTeThJzx7VXTIhBgEicp9sBUvYc25y1xKGXt4jFxmbunymgXh\nmEHtkPg9m5JBeba7Qv8j2akNKqRxOQxGgQRKnjupW533fP5a+KXVuhIohVsn\nt1cZ+OQniRpw/eB1frLkI5N/HpsRoanexH1cOM6eAD8zDfLaAhHSR/UUd8U9\n/EEV\r\n=E7xe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5xInUOBdAWQfXwkueiLzGCHVnzAVhYUDfhMmpee3GUAiEA3m6FexiUiUra6XNjBj/B1DAc3BJ4BVdsyDgm/sVrpSE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.dcda879b.0_1629325447774_0.9031328342307825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-select","version":"0.23.0-canary.dbb8b366.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/floating-label":"=13.0.0-canary.43d2eed2a.0","@material/line-ripple":"=13.0.0-canary.43d2eed2a.0","@material/list":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-floating-label":"0.23.0-canary.dbb8b366.0","@material/mwc-icon":"0.23.0-canary.dbb8b366.0","@material/mwc-line-ripple":"0.23.0-canary.dbb8b366.0","@material/mwc-list":"0.23.0-canary.dbb8b366.0","@material/mwc-menu":"0.23.0-canary.dbb8b366.0","@material/mwc-notched-outline":"0.23.0-canary.dbb8b366.0","@material/select":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mj7smMbsE7NGbs92/8wv34/ZUy/IQllo9K2cEdNIN/8CqM5xpyMuJ4LzeQ2Jg37GNqiK9L/RIrllILCyURTmXA==","shasum":"b3e97a8d2f3dfdb9b48b8d8a95e7bcce97d8b825","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.dbb8b366.0.tgz","fileCount":13,"unpackedSize":204545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuK2CRA9TVsSAnZWagAAJ6MP/iJYVJ5aIXyyXjwl7H0v\nDjQaQ3BqwooTXzkv8NtHplrm1A25gJtSXXiwtCvT4XtdxC6EB7csNB+JeixZ\npN1XKeaVIMDysVgU5rxkEieh5Ol6vVKNqciWic/KYyzSjcmipejzZFIqaWEV\nmmyvErX3upN7gcc0MuB2MLzLz8qB2FiCPCG9yR/5r4LmYkBMET70xF3X0kH9\nau0KUD4pRsozShGcoD+54GRhNx037oK637IDhvXfcS52Xf4jVyH8PGibdlBy\n3gPf547jp/PSky8DQLtAe8FDV7KdkY0vv3NSNja8M27XpUSucygQjEBnEU4+\nif3gAqbUgx99bP7E51piPxFciZnzOFL4bowyz5KmG8+GvRyd3lRLwn/p3YEU\nr+a4ztT5SpsHlKLJDlOvzgeLy9uYJk0g9uQP6HYdCBd+P7f5UpcchmRrrrHM\nOMK2Rm+7ohwl3NLaS+gZzWezOY42yefFAIQO1P3h6SZErtb1H+mT1ATfwPWg\n5nohaMpDn6OajVRXFZA14gvAKGup4MqTz9sDs+cpGnC5PRqx6ftk3190p7mn\n0n5JRiu68I0YPX1+naGtv+mowxurLzHb9dyCjf0B6qHDUll8qG8IBdIRTGOG\nttmtaSlwB9XlvQfRXAhcUGwO8eQyOo0qlf2ZB9ODU2QU0OCRCdnBc8PfBHL6\nTl2t\r\n=XN1Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWqUOfneYpJ4XPAGJo6OVrmAPLvSn6vVTlzT4B1JPRjwIhAPWQvNL85YDJQ5fvdRJB0EWbJkm3Nb44WIqUpxu85zgL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.dbb8b366.0_1629414070514_0.5116452106334313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-select","version":"0.23.0-canary.c6e3060c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/floating-label":"=13.0.0-canary.43d2eed2a.0","@material/line-ripple":"=13.0.0-canary.43d2eed2a.0","@material/list":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-floating-label":"0.23.0-canary.c6e3060c.0","@material/mwc-icon":"0.23.0-canary.c6e3060c.0","@material/mwc-line-ripple":"0.23.0-canary.c6e3060c.0","@material/mwc-list":"0.23.0-canary.c6e3060c.0","@material/mwc-menu":"0.23.0-canary.c6e3060c.0","@material/mwc-notched-outline":"0.23.0-canary.c6e3060c.0","@material/select":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LsJnxeXtJ3s1k+3ufeZ3F8U/oK9Fok6WRzxOcdmYY+IFwQYmU2IJ57iEDNv2PAap/9UgCp/3zduyI+G3Fw3mgA==","shasum":"64ea68bb8dc6db430cdebd6aac129a5126da1d1e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.c6e3060c.0.tgz","fileCount":13,"unpackedSize":204545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMkCRA9TVsSAnZWagAAjKUQAImIWOuZgjfTZOAT3ann\nVDqCd5DXPRqB+uu4jTcwa4I8gsJsI0daWu1nb9lzJi3YrD4TgH0c0CsBZPvQ\nQW+hAc1O85+JapUv4s0l+UOcagMjHrBM0JRg8UE58XZJET9wUWqayby8b7mL\nfHi5qrNASMBHWx07r8cQi23otOtGIzLs5K2JUQu7DbrXWdiDTUmTFGMCxmbt\nY//3VIboTLHoE/a1abi9O64TAjuKNBoljxbzFt44tQJRiXRCLir/09aoPf+y\nShGGz10KCNXQcq2d20V+I4s9qdlVa249LVZSwZ+UqbObAuVmLtIqXjloNO1k\nwzqMTz3Okm/XeK4LCskW44EJUi4U7+8rtN7msB594yLQsETx4X3N/peuHqbS\njm6F7JTrxvb17AEL6LAtLQirt22dPF+e9VRZvTXgLV100IvCgvEswLWU6vO9\n8jvfvG9nBpwc/+UZ5afEPEEEWOmoHcfCyz2A8T6an3zHi50KqFdREim2dvzA\n59CChtFkwVgMl+7EkDmD9s+t+2+Euv+1NXCCsSgKpiVLL4+c6+gwufiKVLmM\nxEX3hnh44BDulR3IaLadYZafbWcV8hFtVzBiPyg7lda/vu6Sz/OhCXuPCcyh\nVQBiBUZU4aUx4M/ygsmBR8h7TUnXmrnlC/SirPgjCvC8X3jpgyMoxPPJQlLP\neqQQ\r\n=ccSu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO+thHk7lPPLujcH8JB1JKKTAJnOXhbqayh+YQiRZRbQIgPemAq+03Bv7kYWqaKxpXO0lH9EkyzX77RdSjTFh9G8o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.c6e3060c.0_1629414180429_0.8295573998009025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-select","version":"0.23.0-canary.03120b7d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/floating-label":"=13.0.0-canary.0a9069300.0","@material/line-ripple":"=13.0.0-canary.0a9069300.0","@material/list":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-floating-label":"0.23.0-canary.03120b7d.0","@material/mwc-icon":"0.23.0-canary.03120b7d.0","@material/mwc-line-ripple":"0.23.0-canary.03120b7d.0","@material/mwc-list":"0.23.0-canary.03120b7d.0","@material/mwc-menu":"0.23.0-canary.03120b7d.0","@material/mwc-notched-outline":"0.23.0-canary.03120b7d.0","@material/select":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uFqEDjFyWueQahn2Fpv8s3v1hkxuDK/JYCFly4HN1OkQMem5uxHcHS7+V4AnkT3t35lo9OniG/fe26cQspZ6tw==","shasum":"b98d3518475da684f23c3b1ee9d402012738efe0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.03120b7d.0.tgz","fileCount":13,"unpackedSize":204545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvcbCRA9TVsSAnZWagAAgGcP/j46p6JnqicyPJwMGkmi\ntl5ppDFB8jAMQ1p6MS55j7oldYKtX8kwTzi5rRmksh9rJbi9lqOfySqcAVM+\nTdmbGNwuYPIY4PoiNFaL9HttMtMay7Its6L7/BkgKFbpahQ2rTHza/O/fTzy\nI4/KbXbkVoAK62PeiRQHgxpmoHkm5SoQ7cx1VQSfrirLzJ+DcPjZs11d69Ke\nZfEfD3+BCpe+i/6eNDRSNMuu7EdWbtsQOCDwfKTKiaQRjslUscTFWY7E8A8m\n1oxrfFM0fcosR6J0skAjWiIMoIEOLtxw5iBkUvIOvQd3aVJXQUXvr+m2GHIL\n5ZVwZRktrmXyBsxHK5HAi1jDQXwF5Yiduo1OOSCdKJAhzuFuDkvFTx1LHbAo\nTlvC8Y2yF5OYoOsIy65GXO468/vA3dT6QG+frIxH05eZaOYITMiPpLme7rVN\n3JC4Q71QuFMq019PDQ05SHYYMuDhYSvXHuINtFYgD8Yda23GCTZElm2Kgxwo\nL+hiBpflKKAC1dW+ldcM+4IfquMN2HhsgKhUw1GT951e/r8Del3DritiSvA2\nKHL/SUA8jlEUfF2nA115gWStl0lTJSmiP74UcyYypujOflEa4/UxxP5bC/ep\nqr/VFzOa/AVof3gOOWJwGuZm5M0Vo5hOwtQ1dDmxIdM+SminoLUNi0mc4f50\n8KS/\r\n=dlrc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICjEpO9+CPaz3u4x4aLc+Ug8fTNRvcy4zluWoEhHh+X9AiEA1Qn1MJnRJ28o4CjNwiMPdWCur/YK2U6lTgAdC+FigyI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.03120b7d.0_1629419291716_0.6725184108138058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-select","version":"0.23.0-canary.d75a5f74.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/floating-label":"=13.0.0-canary.0a9069300.0","@material/line-ripple":"=13.0.0-canary.0a9069300.0","@material/list":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-floating-label":"0.23.0-canary.d75a5f74.0","@material/mwc-icon":"0.23.0-canary.d75a5f74.0","@material/mwc-line-ripple":"0.23.0-canary.d75a5f74.0","@material/mwc-list":"0.23.0-canary.d75a5f74.0","@material/mwc-menu":"0.23.0-canary.d75a5f74.0","@material/mwc-notched-outline":"0.23.0-canary.d75a5f74.0","@material/select":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZqcjBAKBQSiOZDVNWk9RY37wjzc0Xd/zFAbPHgE2/Piz8CcYFGfrGPtvUHeScjszv5VSrrsDr+QjnDpHujHaiw==","shasum":"0d2999bbaa94a5ad2144d9c9a1732940ac611757","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.d75a5f74.0.tgz","fileCount":13,"unpackedSize":204545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2BqCRA9TVsSAnZWagAAQuwQAJhwupJDunx1H9CK2XcF\nWbhu9IIlPu9ilYqxdpw5s46v7oUkmUsXtJedjGIKhWYok1ntiDwLSnkoN7g5\nPqCMnX8a5yD7Osm8iPCsatX88SlKwmLdPtGaouobqFFcqvKAgOSTRB88pj4I\nLeyNzIGQTHJ3WQ/utjjW7hwYFAWN3XeJl7gdgAqiK5aSxiXLaPuZEJOBoiRU\nxpFlS3ohWlLP89GYzwCr1jIqCdXPw668w5EAwFWfqgUS335WaptfLcblGbp5\n9vIkCvian6K0ZSPMgYMpDM8ftCq/Y8CljIBasbqTNEzaECiS4+joXdI/XWWz\neZkWXmj2p/pOyLQkOifM5gHmWK2jxTQe3N8PzO7miE1cxFgbCcEeDq8ugCAf\nIRy/1sfYkZFMPnEnjBwWQrSDU1zPwfXAq365FbKNYplDGx+wgD6pJRTjQY2S\nBY4OJ8BmtCgXgr3gjf0Yu7HcWSPU6agH3JaGe/DpXC2Q05V11lyELzAGNFqO\n6MMkcans0xFBhs5Oketo9oMhHWIB64MNqPTk9nZsdmkE9ybm3DquQmqtjoPg\nUdBP3vVnEzM+hre/XeFz5Hm4xd+RmqdncHD02oUBNPIMMO8K7kMQz1ZjFuWH\nOJsjk7XBtOt8R4g7GnWNNdjj0bcQmczg9pF5wmRyUnuEsNFp7JCMCuZebTTL\ntUo1\r\n=CuMs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx8o4566VJ3CibdOUMMiN8AaJeOOef268SupTvdqqMLgIhAJQSiymduYQGS6v/2ZkmSCy45eJ0dckufrNafqTkVfPw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.d75a5f74.0_1629446250053_0.7920915081176929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-select","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/floating-label":"=13.0.0-canary.0a9069300.0","@material/line-ripple":"=13.0.0-canary.0a9069300.0","@material/list":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-floating-label":"0.23.0-canary.3d79ffe7.0","@material/mwc-icon":"0.23.0-canary.3d79ffe7.0","@material/mwc-line-ripple":"0.23.0-canary.3d79ffe7.0","@material/mwc-list":"0.23.0-canary.3d79ffe7.0","@material/mwc-menu":"0.23.0-canary.3d79ffe7.0","@material/mwc-notched-outline":"0.23.0-canary.3d79ffe7.0","@material/select":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ieJdEakrHcb7eEQcMB8W5EKYepTGY5UXvqsjSl/oFIVtipamhluWWGOeLCa2ytwWr3YZb1HYqMhX/JOqSvsgWw==","shasum":"fe10b8407a994683d02f91f4103f2523b3b27bc8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.3d79ffe7.0.tgz","fileCount":13,"unpackedSize":204545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+TNCRA9TVsSAnZWagAA2FsP/21eops52y6CL1cVrURz\n0ZH1UWS679fdFUA8ygTOvP1+rKNwqZ5A7ecrcCSonmIC48MX3YT+mptkgNd6\nkgUUyA6dEzvqvU0OwCIa6GqZRLQq7GekHl5cu68eLxGjLGKLsaVMZfLPGbM/\nN0TJnZi+deuKqDIypI0fbTvhDwpVaCA8AWH/9YIbsEQKn85jqHOylrk7DOGx\n1h8FZlM0Is8WHndCTfUsAo+0FhOaIpHq8ZV0dFsVd+lB2+NcFs8wVmRt+O5B\nM4sNNoIrVA/LO87l3H+O/j+l+8oSvp8J2bGIZiEfsZDit77xS8UpOMXYaNBo\nQnlI1Yx3tdaOj7oLi1Fi7Db64snbX45gY48/AlJ4TONnJIABchvZopDpljWk\nWek6FCJNgbWMQ0pP3e8EQjCqjAsiczrRwocKsoj+o6wNXNDka6CVGvaf4g7f\n9nljJF3qjrgDByQfdKypy2/U7H3B5lcNWbvINQKGCcJ3GksXe74sjtrAU8MI\nzY+FIJ6iq4ElpTmFO30PIRT/oJvJnGjO8XfTMAzXYL2Q6vH1xvItJSnPOC2X\neHm2+P1Kuj1CQ7R6Q15XiI970jn92iwX+2D/eQuRImf9nLy+5RBudXQ7NT8a\nZg/KYLhxwvBlTTU9TDUgKrbPeqF+WKYBWwYqx7nC/dDK2wIdVrX2Ggq2tMFw\nvAo1\r\n=OglC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGbC1Qng9mBaYjms946Q3P4PiwWNfucSK3nCOzKzWxGAiEApK5A0+TnzXP9lp8jytu7Xbtn+L21nvOVaUPSI2bVl4w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.3d79ffe7.0_1629480140856_0.5157862895382483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-select","version":"0.23.0-canary.02213ebe.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/floating-label":"=13.0.0-canary.0a9069300.0","@material/line-ripple":"=13.0.0-canary.0a9069300.0","@material/list":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-floating-label":"0.23.0-canary.02213ebe.0","@material/mwc-icon":"0.23.0-canary.02213ebe.0","@material/mwc-line-ripple":"0.23.0-canary.02213ebe.0","@material/mwc-list":"0.23.0-canary.02213ebe.0","@material/mwc-menu":"0.23.0-canary.02213ebe.0","@material/mwc-notched-outline":"0.23.0-canary.02213ebe.0","@material/select":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xAFDCCJvNwEjiBmIb5QIL/bUIxmNv/SpDYtgwYxlQve55GovwsNPZSf02TgcaMO5Bl7Mf/Hvtci4dV5j1xVVzw==","shasum":"7b63e5ac26f461a6a09e4b5c6bf0083e506be049","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.02213ebe.0.tgz","fileCount":13,"unpackedSize":204545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XqCRA9TVsSAnZWagAAO40P/0IqWIsgNou1Rxt1r7c8\n0D9jjmFd6e9GzrjKQvyNrBZia53Q5cX3EmqKgWtOMyS3fcDO1svRbe55GwWx\nhBPvO79nMoY8bXw43B6UHnH+3+SpEZT+PVlqAGXziuvNQrKuwdiVMNQOHQSY\nSd7LXgszahTBP97enjozHAEVCBg/vgjZEJraclC6jXM6tA6DllJmeOO2olrp\nQU1ZaUv2NoEuc4fZACzLRx1ka1ob0rFq4xtF8CMcWg1mRO3Vp2hexvvZEacj\nWDbBhc0//ItuiRueyLUzoTn39dzN3fKDVKUSyFFNHhTwI5Ka9xDqzs4BzXdI\nfR1s61jSqcgOmRS5IbCpmRD+bNvHSt0n6oRLiXZ1OX+BD7dqaoWcrpjks3RT\nz60aNTzcYtbQCgRjNls4gM+PCDbuwFX1hb1OLN2QrEmv/XMzzEUyRzpBfng6\nCQFPjzwnM9Lkxz8nIAGa7nF0OA9EvyCZe59ds5Tr0DWsW9MXdMz31DHsz00b\nwfcBX38ctWLO2bkLKSmkAP3Q7kaKLBhx169Zdf3XLL4ISPe6MA+6EzCZzpfY\nSStRW2QH36XIp8MbJ3WGDYqO8X1J4fA5FMaMUtUG5bezommLEVRa1flv2/lp\n7R2JTAirC7QFTtwXkxx7oGYi2y6SHbmT/zH0Bs/v+wEGyWmcmBX56E5yREul\niHG4\r\n=oESb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcIdsvd+h8yoKlvVxyG8kAitPXgOFi0czbcYC+j8sR7QIhAOXL9ibFIFd87c7dfWXFSsX+GKslYAWzLu93EjYB1UQT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.02213ebe.0_1629480425996_0.7696807090884028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-select","version":"0.23.0-canary.90a999b9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/floating-label":"=13.0.0-canary.7da413ed8.0","@material/line-ripple":"=13.0.0-canary.7da413ed8.0","@material/list":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-floating-label":"0.23.0-canary.90a999b9.0","@material/mwc-icon":"0.23.0-canary.90a999b9.0","@material/mwc-line-ripple":"0.23.0-canary.90a999b9.0","@material/mwc-list":"0.23.0-canary.90a999b9.0","@material/mwc-menu":"0.23.0-canary.90a999b9.0","@material/mwc-notched-outline":"0.23.0-canary.90a999b9.0","@material/select":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6trqnB6d7CyJ98Pp31dNXO4OkIXKxUajTHE3bPfEXq1Sguc/iHCtYM9jJgoqhPqNUkiYt8LCXG0rKLoulNYxKA==","shasum":"f532ee274e2998d740f8a7bf5f8c19e8a3fd8240","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.90a999b9.0.tgz","fileCount":13,"unpackedSize":204545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/fQCRA9TVsSAnZWagAAtOEQAI9lhO/xeeTCMjWSMEGU\nCaKb6KB3CYlAqa43OXwoUVnfuhxxvfTVrPjn8Bk58fgSZvJCBn123zKbMp1M\nCwJBqUTftHMoPAeOEeaUhPJHQ0V2qKL9KSnPsD8jy3Lao2Pe+Jnk7PJjsvNm\nYNBCazhP2ggv8bkcIUcV3f9LiZ9YtlFCVQ4Bi9Z2s/zsBCSkR8zeu7TnfBL9\nBUcL/YqKt6nvOmYUPCv0a22ddSKNdaG6JhKGoB6oiGMV4VBA92RniTI7hj6g\n2EWgsp0hi25qa49DMNF9C7OBAtUGQXwriW513C7w8LOWIwbiPjyRiZ7dqfVp\nyxwGGQ3bL/VyUtHndTM6vzEHE5d/i/FAgNY1cEMNx/MfPz9JkSAYLGSTxLiE\n0/W/L1Z/vi4dfuKlBozMNAN/h/hEb9z2nFjSZk8zDAUyWSS7ZCXTLqZYkMgx\nfFwIcF/c1e86NBx19MFpYN/u6ojRtaDjmpISN44KHFrCjilUyMAzWSS4pP+Q\neyAnTVuABXINwlygSa6vfYs3+On6s0YHWJVtCRU5eCJ6MLiyWSDSsMuXJpHY\nFPBzXl0T0tIZo3aEsKztvBQADbKNRaQRtyoslusp+AjrDS8at4SXwXbHUKs8\n3ulE1DoyQ2AUihd3o0/Hc21sEW2X5eWlYh5W9dDiXJa6YNFXR1I2GpSDg2YC\nmtR0\r\n=YDpg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmihBBHqteEJrsGRe0g/GfP4SCQtuYQQYCmzffDa3k7AiEAgXxelYywiiHK97pajrz17jPYp6HRV7W/F6hgXSrCZ1w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.90a999b9.0_1629485008404_0.6486270880014477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-select","version":"0.23.0-canary.6db58716.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/floating-label":"=13.0.0-canary.7da413ed8.0","@material/line-ripple":"=13.0.0-canary.7da413ed8.0","@material/list":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-floating-label":"0.23.0-canary.6db58716.0","@material/mwc-icon":"0.23.0-canary.6db58716.0","@material/mwc-line-ripple":"0.23.0-canary.6db58716.0","@material/mwc-list":"0.23.0-canary.6db58716.0","@material/mwc-menu":"0.23.0-canary.6db58716.0","@material/mwc-notched-outline":"0.23.0-canary.6db58716.0","@material/select":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W8T1dIBpKsmqwQNdFsRGkbd0TkH5Rl5qhOrboaJBzsrfVzXc669/WtP6dCQ7x9JYWIWq6CUMJO2qTG6Gbtomtg==","shasum":"06cf652cce0ffcf597bab791ab2c6f2f8894dbff","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.6db58716.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WoCRA9TVsSAnZWagAAZ7AP/i+xpmHxM6szYvBd78c6\nLpZWg8tR2wBKV04K8EivEJPNpzkQLu2XHvyHiiPtUn4F/CsjPGWoGcKxOoFy\nYkYs/6vDvADAQQMhijsV6pDygKZQuz/jfHsZQcAJUYyM+i4TvBYnb9M+j8Yz\nialJBPBXWP8y7J5w+8MbNNwpfdal+flOVhZh8ZLStIok45sEYi9/UbBgf8vW\nrv7Hubf8hUn/8h1pZu8rn0KlaQDh1O3J2cd/lQumnYh68Klx7pKb+hxUCgmN\nq2btXnTbVDKEq+cNVvyaFb7OiUBkSGKC0xEUCzqATnIYYPoRWPZJmwBe/2Os\nbHkZNbaw0yqM2JMjpyY+t2Jq8LSdqSdfZdeoJTaLkKCORtmGhqdov5Y66EyY\nPnzxvVrBZePtsoBziRxhoRFPViuycX4DBA6HdUulq3bqNvz3qc5NEUFgJjP/\nJ4vtH9esJNhvwTtoLFj+AxlHPqUftKvSZJiUSZ6VvBTOe9XfrokelmlT/i8y\nksnDuHmFx1kSrBldfbvOYOO1xOkqXMZJb903qyWOmTNZW+q6RS7JrzPRqDwx\nC1OU/EJaRvmOk3MTeeBjEEwMpPxDZMEG6Q4jKEdnK00Yi+U6qbo/zNYODo1C\nyKDCVT+5HT2OyoNXolwiOwX3235ywaMZBfUFCq/D9h1tmxh9izTIBphQ7h16\niLqs\r\n=RhkR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7uGIwSx3w6oML6tHMcLvc7SLPuoquWrDv6axnm5BE4AIgUfTY2/grKI/7pQaP5EyQFfHST7fedxQLElxohxYGcr4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.6db58716.0_1629709736148_0.9448831887512708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-select","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/floating-label":"=13.0.0-canary.7da413ed8.0","@material/line-ripple":"=13.0.0-canary.7da413ed8.0","@material/list":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-floating-label":"0.23.0-canary.9fb5bc35.0","@material/mwc-icon":"0.23.0-canary.9fb5bc35.0","@material/mwc-line-ripple":"0.23.0-canary.9fb5bc35.0","@material/mwc-list":"0.23.0-canary.9fb5bc35.0","@material/mwc-menu":"0.23.0-canary.9fb5bc35.0","@material/mwc-notched-outline":"0.23.0-canary.9fb5bc35.0","@material/select":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JuGE/d5ZcOvbfznU20OfIJZavP/NVV6XmrIke04YgEp2Tmeu2WdejM51VOVko5F8dYJyGiIjdbdqhcaKTxihag==","shasum":"ba2d7f2a2d953c0c8aad310b2ae5d43c098a51b9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.9fb5bc35.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCZiCRA9TVsSAnZWagAAWxAP+gLUOyhX9slNEp6dUDCY\nGY74o6Wqvo29Uf2piHzSBm8+Me73oTmRfe0K2hctiqENd3Hd0MzJhunpn0dA\nly2Po/9PG21jRbFQGZcWla+gqH5VzhVgCrenOyiOaNsg5ZDYyw75QjyDQSfJ\nifva7fLClCzH1n6aawEXq6ZGhUMFhvQ96MOPZHDsIsBOd8jYnexVBZGN80zv\nLARTXrgdTbPTmlWXLxG8y33IQh6sKW86lXlb8EYPSNp0A67TriGJgpwtnDRj\nS9T0on8gogExeGJODtOCT9v2ByDTnizLD5KikO4mzMSvsie4f3n2t3a8RHOZ\npiJ7MTchbGvH/q6VmO10Qy6Aa8DuTWIaKwZhb0Qglv3URh++HK8Sn+HmFN0w\nL2C9aOZ7cM4d9eycj7FRdAgbGXphaTRDozHdRSM62rkzg7TlQhvzVJk3okcy\n2PdqYu4LgkNqshCI8M9qQWEomNCWCwWdFH3DO6/OpOExC/a65UBzSYWshlW/\nWOP8/9e3pK6Pq+3BqUPx2tnFdECLvxWZkhxod1LGA1qCt8qcOLrVPCqVM/bQ\nJo74wJaHfYzIVNjPYayjRCMC0V+uXSTK1Mfbt0ES8bjT7BAIx/1q8sDcehYp\nU8wtLyIwj+ebEA4xdH/Q4Dx1NaXCwUte9CSWjEXzFXfF+8tz/Jx4UjhHD46K\n48bY\r\n=k6kq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtJ3s2Nf1D2NOc5bjZrn95vSbr176p1VaaOK2X3tGXOAiAFcuz+9f4nOCm7ih6fSJmR5Asoc+jCENDoKG28bNmn9w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.9fb5bc35.0_1629759074214_0.8177599126902066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-select","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-floating-label":"0.23.0-canary.ddaa5d8e.0","@material/mwc-icon":"0.23.0-canary.ddaa5d8e.0","@material/mwc-line-ripple":"0.23.0-canary.ddaa5d8e.0","@material/mwc-list":"0.23.0-canary.ddaa5d8e.0","@material/mwc-menu":"0.23.0-canary.ddaa5d8e.0","@material/mwc-notched-outline":"0.23.0-canary.ddaa5d8e.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LyvXjJQBUzuwvo9p9m9/AxVlubyjlWhwiKkCPFWlwHt0M8JSEXgZWR4pnuXCZ+HOr7MpreLQiUd4wkMcHl+xLA==","shasum":"d3c5787a2c30dd857160f12b1a438e52c287a6e7","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT+CCRA9TVsSAnZWagAAPLIP/jVOdEqof6zvUBH792hS\n3q7V66DfQ3J7/fOXRtiyVjaewem+WG5UNj9fynj5aXuECq+hasiPASxHOLA6\niNUUuD4PAivAaCMXL2J5p/f+zDtYM+34xnmsYexWR2l/B2Rw2EEQEFzguBnD\nNpPxy6hEyCxb5EYa8A44kNt7+GKSozfmOO1RgP6MYbI38UDZRbK6SobNqvYi\nF521M54nbV3ZPIwXCMnsssSx02HapohAaO/qUXuSYPxOL3M0kx+bEIAMNXrA\nXsjVPh4OQCsKkZpDBd7gE+4Z2hPChpCLYjgG47egwyIQILz+VmFFc2Z9MDzu\nfRXb2/2unc04LTFUBpL1q5zpI5u9U/don0UagAUi4aNLqhHv+RIm6QZQTqEj\nYCu/XO5z6pww6XXvbl2VFLisOEva4ze9UM4HWisALBhyxZDVpb153DgNv1V1\nQAXjz0iNfulFZJf9rqPuwuhRMVDAq/qq67CeHshB0ikfBl/zetHr+F0V8JW+\ncj59Z5hqkSnApFeOMJbFnX1vkvXz3lKsrXOMQ+fnt2e2rB8r8pGFCs/qxYL3\nNP3OAvKwDRouPNP6WscIVKUSVSx8iXGV2jOCvH9qwfSMQ0B0vvzzFd6KL8pV\nOYM8G+lMAdnmsPHg158L65dNPZtws4UYj9C5Fv3z1leUrSC4A92n8BAOHP3Q\nqwnl\r\n=ba7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrGhgNGw9kiYYPEjuPOz9k2PQrHrHjr+ptOOVIMwsj/QIgET11JmYazd7vW5S4FM2WZPWAc1V30tXtaAq+2Wp/MXc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.ddaa5d8e.0_1629831042703_0.8092066851474373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-select","version":"0.23.0-canary.756208fb.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-floating-label":"0.23.0-canary.756208fb.0","@material/mwc-icon":"0.23.0-canary.756208fb.0","@material/mwc-line-ripple":"0.23.0-canary.756208fb.0","@material/mwc-list":"0.23.0-canary.756208fb.0","@material/mwc-menu":"0.23.0-canary.756208fb.0","@material/mwc-notched-outline":"0.23.0-canary.756208fb.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oSoUxu+p2XVnQVrQLlk7Zq/T69ekcdqOdacG3dtQEHGEJE2cGVkFxpsLnSE5LwJ+CH2zxdTADIDCawssa6MsFg==","shasum":"afbb98b1f54ad0450ba0a7a6860d94f4b0b89e81","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.756208fb.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp9KCRA9TVsSAnZWagAAcecQAIkiE5xmL3u2z4YtvqeU\nevssbdwT5zZvtEafySd5Z1OYE2BecC4FrnECS7BbAsi8VxEaiZRs1Y0K5d38\nMY0Viqf4ubnR8EDLhLQ3vKwifv8mpsjWFqV923PnBCtGBltVZ5rJh1WeJsaL\nuwbnmx097jspsEAfNwaio1j7DFp240kKFTHJAjkjwCjfLwPA3a4xFjhmBpz4\nyFm5DbPDrK868VbwH4yk7ZV17fi8OINQlIgRwZDdPxxNto0oSZu4MDdlHLrK\nVI/9bvb4mjVK/koHaYwNOUUzvm/0bJaos2MsGWXr6/zqPLutDGSEc7vi4Mdi\nT3zq6G/PjbTFOOvMPjqmUxhKlqOzXseLbgAorzk508iJPCZI+3tpO3jWwBol\nRGb66uDBtcueYarl9uYBj+sbqx2mMuEUXZGsI+VS5bJ1+OWIMlGxfAQL4ajv\npAM+BM9SwbAUEYZZLHHI1xtNsz7F3hk99YM+W75zApaLlr5KDJTM5tUaA8a+\nqcYEAcE/1mvDx78aipQDHWRRN/eSiq45DckDiFlnODAJSjPS5GO/cG3+40NS\nPMxXOkdgiALGytSOwLpHT4JIBP1+nvOIR0uQEDbB0CmdmhZkkBX9leDLwQl2\nkXKQDJMJsZZNfQs/yhGurcMhRcrdh+CFj/dHPcekcSlI8lhkPAb177H4vgKh\nVCGw\r\n=IjnK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZVHrNf7CgH5nilfcbwLY8319JD1B25c3t4gd5qv1osAIgLVLYmyCDNAmUIjtUa9nXtlJs1kW3rGUColhf4CLjPXM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.756208fb.0_1629921098032_0.656838509058538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-select","version":"0.23.0-canary.9576dcd9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-floating-label":"0.23.0-canary.9576dcd9.0","@material/mwc-icon":"0.23.0-canary.9576dcd9.0","@material/mwc-line-ripple":"0.23.0-canary.9576dcd9.0","@material/mwc-list":"0.23.0-canary.9576dcd9.0","@material/mwc-menu":"0.23.0-canary.9576dcd9.0","@material/mwc-notched-outline":"0.23.0-canary.9576dcd9.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qweIAtET+Jy73l1M0Pe1JUf15fUa2KpiiV+A2HGSNaw9cTZQNWOAatPTrMliRV9fHNun2/8q98LpDJ7ubCPPEA==","shasum":"fe8fc092cd277759a99940cab817b2a846bb13b8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.9576dcd9.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrnQCRA9TVsSAnZWagAAPIcP/0gsLoa9d+ddkniZkgxr\nyFydFZmrIGaoEyN2d6svYkcmU3UL7x9xnywF6MB5B8lrMETcxx8T77Aqo4o/\neJ5X36hVRu19fRwAz3z7ssvp+UgAFRLsJvaeCoPu3H6JKi74xfu4D+6+EAj8\nZvM2IItQEr/zgSitJr+ovyiApQKuDwpd92DogSWVpbYLyZN6sAG+ufzM4B79\nXsEpUzLrFJoAEB6wUM8/bINg9+p3ERrzMEhVqVObwZJxzpoW4prgS+2br4L4\nqh16pq8twNDYhl+wzNpup9jzqKhb2/2Y96uoIGIcii7AFplRryqzVAWkRzfQ\ntEs+A/QfulO25Gp06Limowj0nD7QRPC+rKcUmXIl1SCCqZ1P8Zhl4H+HkjMy\njgIPm2zrPRbSJ3Y6cmNnIzs/Vr3mv7cc8RZT3AYrmr5JBizIqSUnXR1Rv9E3\ntmkMFOkjMSy2PaFxqGY1JlgaEVXEvwEFqAgz9iNT/dmhr8FLrs8yd66ZIIyv\n5OJh8zhObWwQspsaFrugoJ1dcWTiKX4w3wZMXww8gad1WW+7QQBKqGWka0QR\nC5nRw1Jfd1tbzniR+PiFqMq6I1AKzCFQFMUbGo59YFNBsE6Vv0Y8o31r6lfP\ncOKQZ8ahm3dr0Qic8/FZB8S/6Yv4ivprxcyG1y1Fl5+B74+f/63pqptHAMI/\nsFZZ\r\n=T8dH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6I4FmXEq0wLnk6UbEbP/7gXQa6sOffsSWF6Aeyr+2yAiEAmJgc6r0DQexpq41fD8wzudbL4JFfH+xVZ/nWvDg4DL0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.9576dcd9.0_1629927887971_0.4714639023083007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-select","version":"0.23.0-canary.7531cf97.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-floating-label":"0.23.0-canary.7531cf97.0","@material/mwc-icon":"0.23.0-canary.7531cf97.0","@material/mwc-line-ripple":"0.23.0-canary.7531cf97.0","@material/mwc-list":"0.23.0-canary.7531cf97.0","@material/mwc-menu":"0.23.0-canary.7531cf97.0","@material/mwc-notched-outline":"0.23.0-canary.7531cf97.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D2vxgXqLHouC6q3cW0p/q6+yXI8bcKsIxTbvaK5EqMqljjZVEvAzMD3VwXPav3oKJavQd9bv+67iEJziKptNvw==","shasum":"1fa5d9f3b77644da06312d98c1fc06b7426ec568","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.7531cf97.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87nCRA9TVsSAnZWagAApNkP/1DdxdJqsr3QbKaWztxh\nu4K3po5JfxmvB8SlCdkEsmgY1CK8j7U+AgdDfxO25exJA0uRxyLP7LkCTLIk\nodRA1A5AA3BQvGNNs5fdMZSPfwREjZgI6xkoGKQhVHJBCFd+WDhgmaRBIugJ\nsLQtqbdtrDUSG3N2MB4cEIgr78ZyABNHQslEgYs19bMNnP/QehbDrui20NMG\n9n3eiOq/eh7N0GM3e2mTE+vaVsde9QRGHxvIqN8t9YD5meg3nClwf1WSB9TM\nFcUVMgIQIqFzD/4FPiJELOgFlxB7TY7Gj2/BRFVCKVDyHB6vyNvnJKa7kMWP\nPNrNHaz5jWrdmLSAa/19cGK3iw1Z03S+4ozZJCECwoYQd42Db76tXykw1a7N\n+C6JtCvuDaiqUdiTluWs87+8bk1uEF76iJJ9Jt+2J+4qUMstSqi8ZYOXmK2y\ngfP2o0z8bjer/vcqCJ+PE+9gczSoNEi46qehBv1nD8gylq5PWgO/HOOzGFLS\nZHGdTlJAvXC7iqU6e62Zw9PzIOc98s2phYR2ywkPWFd46m7ZxxkZaJOk+r/2\nV4vtKgPNdCisTaw1xZkCA46QcTFUoKXtaTclX1IQOohlybADYhHFOlhksWIj\ne+mis5tC29R2ecs2yhinP4aCA3yVou4hUl3ObkoqmxPtMVBju/Q5dFfmuIi+\nv/LD\r\n=9YKu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZlMPfrIn6pSl9qiNTeS6n3+uoVuwVT9oEysejiED9xAiBJwyLDfqa/lwKFTTkpJn6H5IcZXiQeo5xkrgTUByIVIg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.7531cf97.0_1629998823399_0.552686110222036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-select","version":"0.23.0-canary.3bab26b4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-floating-label":"0.23.0-canary.3bab26b4.0","@material/mwc-icon":"0.23.0-canary.3bab26b4.0","@material/mwc-line-ripple":"0.23.0-canary.3bab26b4.0","@material/mwc-list":"0.23.0-canary.3bab26b4.0","@material/mwc-menu":"0.23.0-canary.3bab26b4.0","@material/mwc-notched-outline":"0.23.0-canary.3bab26b4.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a+Zmc0u549aS/5gx05ts3uMv3guxIqPbWWpSPTHP2VQDx3gZv1YGqTWz+PZbhGOkxAgHuGwfus434bcoZfYMJQ==","shasum":"62da7100c8c15395b9da411dcc1897b109e9907b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.3bab26b4.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAuICRA9TVsSAnZWagAAKB8P/RJ1ebgcCDAJ97dO9Qeu\nsnVlHxRS8GBeCSv3tcLSQqHed/GiDK9DlzxesNoOtTM/9B1Ex5/KylNWibbv\nEfbE/ae9s0E8xkhBm5XV3TFWTxqEylI5uaZQWTxTunInjtb5WCiz4c+PMvBT\nZAcomSAgCDZB8PI+quIPSYTVrUIX7oKpd+k8CE1NwHaldRUR5H+Ui7/HgOxD\ncbzbgGx8Wnuy3DhB4SfB34+iVVpdu6y/Xm70Qctz7Uik95O75zkakEbBlTcU\nE5WIAQhZBVk1IK+z7p68BppTV0ZZ5YWA0x3phwwoVsRH6czjHNW1+vPle2Yh\nKQ/maEBnFPLkJjWPnX7W4qv2K6B5jkhuFG2ZBFILRdExOxEZE1PhIuY9717y\n4OmgRZM3q3Kwwwm0CS76+UcMX4KGBRrpAw9BdaX0mIOrZBZQWS7iv5MuB1yX\nh4EfpXl39T93I+KYIlYwqXSFYOhc5H69TFfaYI90CMucVDS7MkzX+5MdnILw\nLQujzVrH0POamP2ncrHcB8AKCmVT8Fi+ZmgW0cHD0gdC5ttSuKNYj7bzkCIA\niaW3iRdHPC3Umz/N6N+F6F5Kh2y3H7/z5zdENtRlPSkcdJW7Hg34ccj/pgld\nFx28aGqjgfx98TkqPxhPRagFJMazon4Jfg3/MaELsTth6XMuyO76Xg/yTUC0\nxdI3\r\n=LHAv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5y49R3YWAQSMhFhVqU6xtrMwjGbZcOAZ299m2Jv9jdQIhAJAKQ5rSqDkdfKSPjuXkw57NnDkwclE7M4bO25oP3t7V"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.3bab26b4.0_1630014344484_0.8471156613713695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-select","version":"0.23.0-canary.fab48bee.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-floating-label":"0.23.0-canary.fab48bee.0","@material/mwc-icon":"0.23.0-canary.fab48bee.0","@material/mwc-line-ripple":"0.23.0-canary.fab48bee.0","@material/mwc-list":"0.23.0-canary.fab48bee.0","@material/mwc-menu":"0.23.0-canary.fab48bee.0","@material/mwc-notched-outline":"0.23.0-canary.fab48bee.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ii9CCFzWyt4vUweOiGNkLWT5i7oQY/r8ahAGZ2u4dUs3I0nhHy4JjroC/Mn73v/4+f4ZQlt2vOwDyUyKKc7RFA==","shasum":"523f87420fc63d0011499dc901e71f73ee17eade","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.fab48bee.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBDnCRA9TVsSAnZWagAATn8P/Rh4tjMhUHQd/H0ZfZgy\nBEGJW3zFs4hHMzK51HBYhuhXEy42oHekWbkLSN1hUNX1MWweztFs19rKkX1v\nr6nrLfpsoZmMSoyfTBeMMpm2JIq4f+k0dI5DNgBhghKh2lg0O4eQh5SggKij\nCzP3LDEQNj/DJF6fBzG9dKWILUn+FNPNkpHq9borlaexNMRgbPI7Z7FnrdH5\nPjsrHONWxsUVQbgCKqupv+MkFnroaZMfkGubygaruOSXwtuZlM5wWBxjPvkC\nvB0FACON2+seXfwQU4O8ZgeV4HjGB5ZUgzbQDvbssthr7OgDIDV3PvQqw9zb\n6x5DpeHx44rCt59Q7HBEuDOuqRdZ8TcqFZ+LCo8tx2t9/75vtkgxFN6Mw1Yx\nNWfyff/j67H4T3fwABhES22Y/wmTqvvGg5FZnFmm+AozwwUMN6TmqFjutpu5\ncG/9hcTZOdgwAAV4ZFayHtNtXFfvmL47ci6lN2826u1YBxrEFRdnjbz4gg4o\nSrWKDaCmSNDbXcmFANti+vYMItzVXKMkGO4/HDdb1QtKKfaxppriV2y9UARd\nUnseuU0wiUviQD17yLPS7oNHelm5NpVUNeBryLUTnwNchW6U0qc1EJ37yzSC\nVeE6tUuGlU3e0Y71eXEXrPAzkZDbCNbr19hvZcVKMuNRP42EP+Aig+qU0hY3\n8+Hh\r\n=KiRF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyVMptjuTio8I8FUTK4m/xRQny4mtlH1sW0SNurcdeAgIgLkqAya7v9bcFUrbU4KlbGPbnk85qhFoBsc7fIeNv1bI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.fab48bee.0_1630015718873_0.06748090357180558"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-select","version":"0.23.0-canary.dec18df7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-floating-label":"0.23.0-canary.dec18df7.0","@material/mwc-icon":"0.23.0-canary.dec18df7.0","@material/mwc-line-ripple":"0.23.0-canary.dec18df7.0","@material/mwc-list":"0.23.0-canary.dec18df7.0","@material/mwc-menu":"0.23.0-canary.dec18df7.0","@material/mwc-notched-outline":"0.23.0-canary.dec18df7.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1Tr0zh6T0uWs52dpnCDSHPk9qmon5njqxhpWd2IKFRIjLVs9J/59sfjounBLf5X66AaY9xdknsLssdsLryuaRw==","shasum":"ae1852b38ed7455eaf63e74e919ce9d7b488947a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.dec18df7.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJcDCRA9TVsSAnZWagAAMpMP/jA3A9VAUDAxiWZ7NKja\nUEHTzu0168y+qro/vJaSbA+hxH7feq8JUWEzjrQo3uvwKgy+0X0aVJjKtqaJ\naQENbuJUyL1reDludBVmnWJy8w9iQMdLjdrQUR8fI8kOhXeHs4HVYFxaw/S5\ngT1/CcZQ83FyTAElO1kt2FVR/xu6cfJHD6nwB3uPpjCjHlQiiNs3Wrs2YR/y\npK8no4rI8fJbv5amAMOaXsEric5Xf9cMIMPSBeg/Stj//qwqW8UjMfzpn2do\nNftJaxvouCr49mzFIAl2l9v+KTDkaL9gjBbZqIaqrjsUVTNogV9O7G0FMM9h\n/O/dQ6DYl0D254yDzbB9CsIsaUoNj5t0BEsU1Ermj1R1T5q13X4XsTFTteS7\n4385ea9LGUPemG16ChG/7/6zm2DnQdNt51QL7Ds/Jgnv967qyC9vOF6suP3V\nw2boEC+tZUyhmSP3cOzBOpoB9APpjsLNVNqSEnZNwlXlTbYFi6O0Kc5DcNm6\nL069HC2SIC7zI7DjDHEm3Xku5BOhovt1wIfBu97gD1+ZuNeEEXr+UIYdths9\nKwtWBBwt3iNYCiGHajQHx10cddKIVgA5QQP4TdHms3O1E4+8RQttbC3GM6aU\nZcdFPGFXHDC9vIn9w6385zWWqSmcbK+b/14VQjQE9ljFhmbvFuvQxGD7zoR9\nyvHN\r\n=u4oK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgyFWjgb5V+I8Upmbrh9qk8OgI6zKxhKlhOrbNCA/buAiEA7WQPQxo4ayu/qJJbuJavqRQFJVNbRwd7NCWoSsZxiHI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.dec18df7.0_1630312195320_0.7033228767099466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-select","version":"0.23.0-canary.61fe5b17.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-floating-label":"0.23.0-canary.61fe5b17.0","@material/mwc-icon":"0.23.0-canary.61fe5b17.0","@material/mwc-line-ripple":"0.23.0-canary.61fe5b17.0","@material/mwc-list":"0.23.0-canary.61fe5b17.0","@material/mwc-menu":"0.23.0-canary.61fe5b17.0","@material/mwc-notched-outline":"0.23.0-canary.61fe5b17.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CSNM7VgxU52nolhZqGQyuclbehH6mmt6eidCbhrW6HdYakUUaENKnU5w+7+lP9uO/YPbdJK0RRBYZQzr13XcPQ==","shasum":"074fa4e075f7908ed8c8deb706085d42861efd7f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.61fe5b17.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTGiCRA9TVsSAnZWagAA5MMP/RUtTXymaz8hSht3WtzZ\ndR3AwFBE8KY4hHiAOgILqc5ihEqA36+gH0Bc2o3qpgkScCQ7jyqxCfh3VW2b\nJqNzLbNjgWA9PBgU2O5KkjLar0c6jyR3wxoB0yAi/qStBX0AfN4Qv/wIAT/d\nZz8nK8Lg5yC/cCZsrI//u18o/hjDhUa5sTOCH/NQxihjDGKlz1wc7p/6r+Hh\n7IfoJhRNWue+5CtiYCu1HK1ROyRxESp/pp6+FZ0kXW2qn+FaRIEJzTJ8Ji9Q\nBTD/7q3O7thcbjEPX3tWhMtl/wTjGBuAziFOfLp5wHbJpGTnUH6zSOMD0D2Y\nxxHR0MbFz2by0ELuyqTwiecp7zUd9qA2Y409Azr+BGcjf30UXHf7SZi2MGTR\n+Q39Wd/rjXxFzXpRPs+9U6SbBUfcx17mUgbUmRRjBZT2quWxNM3ZJ1zptP+m\nyCXVF663/t9gqsi7Xk2QkmlDhYo+mjLVTWmIo1xL/E6/vgrwnhG75jaLbACQ\nZUsduiHgSlG5HRShLpVPPLGMZDehbZMRAsjKrsATt1d5eS/JeUPZCA46OkcP\nGzYCFwE6Z5/kepgX9hexp+HL3+jJLmJ9CSh+T3k9PXTWJkm6bf6s9FMrMffS\njAvH6uIe7U19c4fJ6ANaup3Dg7QGubuGzydj3H82eF5H9bkXCGxXnHqFJyRy\nqBj7\r\n=0Ho/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLG9PQy7wrYdL9zSMjkbXQQt2Uz0YlJnIeDkr0Y5O8AAiEAnxXgYF0/dtLhq/nujF926DIQ3gPGe/ns+zANeDOEJuc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.61fe5b17.0_1630351778143_0.21187311357072236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-select","version":"0.23.0-canary.a8c31f54.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-floating-label":"0.23.0-canary.a8c31f54.0","@material/mwc-icon":"0.23.0-canary.a8c31f54.0","@material/mwc-line-ripple":"0.23.0-canary.a8c31f54.0","@material/mwc-list":"0.23.0-canary.a8c31f54.0","@material/mwc-menu":"0.23.0-canary.a8c31f54.0","@material/mwc-notched-outline":"0.23.0-canary.a8c31f54.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lc+kNG96qimxDuf5cxBHCZCJp8VmzFPSy5vaH2YPsCZ0ASsziOnaklesahcckuN8cAS5xDEWJOfGoAFYrbJCjw==","shasum":"c18d64e431c21dcc9494c9ece315064b83cd9974","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.a8c31f54.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUBZCRA9TVsSAnZWagAAkjkP/AllfrO/iJu02AMjAlLG\nvdYoIzXpfI0HDDZT6ZxxOBjUOvYhedYvqgEoisEEkd0AoinTkIqjoJfblTnE\nZ4EjZkZ9/ofOijDqyN9S5ON7OJxeUm39y74yQR4iQ09z3/Ltwnz1j0ZAwq6L\nfTJ1tOF7V4FBtAwn/eDCypzaay7+17CEIQMQ3PTpTO0eiT10gyHJ/jUfbfJi\nVVgGyRrgBtlBefGFpnFKQ6x33ApkINqyn3KPz/v2ACKohQwNhpu9+ffpQBTS\nl8yD9uEqQKQLNwFVOrTeznajYc+HzWsuiO8/8JB/j78WnyKlxnAfMBsz2zXn\ncVZUFuwS17M4CNEHFf0PPygMNf4HdL0h+RkOcSOYCbxSBdRDzN207MB4yBAY\n76iLMIzlmiH8Ro30U4vt+ljK1YssATntiv3mYSKWahzSQTh0zrHcHPx3J9bV\nTDi0oV1iDINE99Yb0WucRab70VZoE9xkAUeMhpK29nsvNThTtrW/2sl//fwe\n6pigC5pUSNRIt8+Rkt5rnweFt8tDuaLWATZvqwxbi3jHjgag2CyAHsIVusW4\nQQ9kaD+nvitpOQE+OHqmzqKJRHXnGqeoTMyGAe1GozxAOse/2zCQkxAwFvvr\nXElQFxDWK5r6UXVxt9x0PVlrgXTBZjycIkizpENUNeGnWQf6LjmAiBvIYN1j\nCa7k\r\n=Z/+J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCra6Jst3iaFEQ3UcFf9UgYkeP7+JDbCKZbEC6LvEfsXwIhAN0wxnMXwD5d2s4V6FX+TP3s4m0ifzbqj5aQueh03bvv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.a8c31f54.0_1630355545444_0.23052874905783738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-select","version":"0.23.0-canary.a096dba8.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-floating-label":"0.23.0-canary.a096dba8.0","@material/mwc-icon":"0.23.0-canary.a096dba8.0","@material/mwc-line-ripple":"0.23.0-canary.a096dba8.0","@material/mwc-list":"0.23.0-canary.a096dba8.0","@material/mwc-menu":"0.23.0-canary.a096dba8.0","@material/mwc-notched-outline":"0.23.0-canary.a096dba8.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bqiK1TxoQ8C5KBRRKBX9QBD6Isx6rLo3SEvT/2ydfY8XCV92ylbPwpq1YHQ/FVoRRLnYjyctTmnmEh0E9sJy7g==","shasum":"0d52674b95c16e5294bd0473c8085a86eb870108","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.a096dba8.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqsGCRA9TVsSAnZWagAA3NwP/AtGAbfQNivPSY+C/N09\nvKR1abcBTnWdgpVTzODoxRT83DlKWfBK6kRDbwQxli5YXBOmvFddPEsPqkAq\nSehcJ3XlSkBwYY0kDy9ZSNTjjNFPVwP35hVS46h6xbygCl26EKSHvmIekHi+\n/6/sWCkWEtviW7HXTA6ZoIBVrDGu+ROpejD2MXATWPjiIeFxRCKXCxXgHrqb\n6RjS2Rd6SnclBxPCxtc+dgkoexEdlgzHoopv2Q+EXziasgkJQ23VuW/Wjstk\nsdGCfihrxwoFUayGNLvT1+Y0lrGgKjsc92HQST0R1aV+1fASG/V/khAIIdk7\nQ1trSgurcIdHcF8vdkj0f4gVp4MPGEv6CStGXEl/8roX1lrSfj0bjgGmx5yw\nVU0/MBo9qtkm8t70Q/UhjRZaF0sC0MI0hjCAiOP6a/Lspg2+fbMVJm3oNLiD\nuRhnbvssuZ/zXK4SrvB7JsrwTkO7DDTeFOD0yVIhqPvNUFigfnIFBmA/p7P3\nB6ReudOJXVtojSlbhHpAXMCVS7N3xzCZ0mE6UywFFbab6vs/OmGS4gQ9QeGY\nIDQZty2ZZ5lsuav5NL4Vu7bJuHiQitfxgxYivLwdhdyAe/nGQHe6w7qH7AN5\n/mFGqHsiyBto+TQisssjDZwoE6ZnXQbgma1kTohTGDJdpejA4pdZj94m+/zW\nfyId\r\n=Nwsw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8KeSETOKw8tZAzHtQ/bXrbIjl3M2YL45XpP183E60CAiBTLhNoEmAmyblKA1vWqSdmyj7u5o552NLdlZWBUreOUg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.a096dba8.0_1630448389814_0.69299524917947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-select","version":"0.23.0-canary.7ec04d47.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-floating-label":"0.23.0-canary.7ec04d47.0","@material/mwc-icon":"0.23.0-canary.7ec04d47.0","@material/mwc-line-ripple":"0.23.0-canary.7ec04d47.0","@material/mwc-list":"0.23.0-canary.7ec04d47.0","@material/mwc-menu":"0.23.0-canary.7ec04d47.0","@material/mwc-notched-outline":"0.23.0-canary.7ec04d47.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HeHc7GpWrzPinj4Rls1B239bWBRJuUY7qRn74vt+Cs4szWjt+d4OPhT/9SbPHta30ilCjx+psRFIKPuK9l+lwQ==","shasum":"83b3a5cab7fa464945a0387e3d675d700b72edbb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.7ec04d47.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV2aCRA9TVsSAnZWagAAw6YQAIa9eaXom7+g8ld7A2/H\nqKM/iG5FeWu9/sdk0bCBDQ6PYOMdsYz0fKQJ9FE4QWElIZlFVGZt6G5xKjEP\nE7depiVVRQFUeKfb8M+ZtPDIevfuwZA9WKawNHcsT/I3lThKfzHhYtPAzdOZ\nVbf9RkgBKn5/ZbUfU/5I5PdtnEVqTUSYO0jhrxxfGhMYVa1hd/0CJ8hCa4aL\nbgLx+BYHjSEUW7zSfu07yI2pptz7fHv2zc+luOCIk3y5PGpiXCAhX+HUo9ca\nhOdHH8sMH449cgcDGcFmSUK6xs9y0dapiX99WCJc1Z0FQECtwjlcSTItqAlS\nBFBSmBMMsKMad4kWOhD8wexGToq5RTKaUfmSPrS5De/LusL/nesMkWgosoPr\ndBYIdSwabJ1nzweD+oyUQN9mbriQmwmB0RmmKKHSuJp6e7H+SllF89bBPNXr\nch/fmEOncaIILGyCqp+xDum0gjS1GrCWqhaxKnN8/QVkscJ8mvgYOORm9Q1F\nW4zGO7UhbpbjpfmIW9I5sI4hpCfsQKoIw4zUCQv/eDT+k8uQaKSjbqaS4RiV\ne4cTfn6nWIQXc+phY23ECodT469NZQwxTQIBOJI9KgJvHXveCXxVMUP3I6h1\nVI6bib1h1n7Zol+4v7IQpA9LUqOAXQ0FbFtoY6UnMOtAuQ7VxRMJ1l2DPE/Z\n0NQ2\r\n=2uc3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAkFbGx4sZfQwYzvRCaEUqKATumNebcu8AqQ1ErsaKBgIgem8mbUWyxbe4aKJARnIeRw8eiW+fWVxN6X1e3kYak1I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.7ec04d47.0_1630625178373_0.2862352439723028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-select","version":"0.23.0-canary.d00b098d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-floating-label":"0.23.0-canary.d00b098d.0","@material/mwc-icon":"0.23.0-canary.d00b098d.0","@material/mwc-line-ripple":"0.23.0-canary.d00b098d.0","@material/mwc-list":"0.23.0-canary.d00b098d.0","@material/mwc-menu":"0.23.0-canary.d00b098d.0","@material/mwc-notched-outline":"0.23.0-canary.d00b098d.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jtgVo/nbjyjYjlPzjMlHqkWMQVjwOMt+HoJkDWnQrmeY2xeOfehtKwhKh2QiOn8B+D0P15sMFPSGWMfMZ01kGw==","shasum":"3d4d371a1e609a4f5cc498ae582cea1cdcc7ad2f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.d00b098d.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpNECRA9TVsSAnZWagAAxkcQAIhFPnznpEBQA8mgYMmc\n02Jz+gr7e531uxL7/zU4VjVmRMhITXUIbsPi9bqowzKKBjWawePxoOqCYT+A\npxSnr0vKDs8HvkCbuEyRB8PmtLlVfy68nmkT/mMqown30I7fTMeqSmPaLdQZ\ndfDWnh10Umob3OcSw3fQdA+SKGQ4aiWW0SmdHywrAaibETwyVW2muhGEpERX\nmlrTqinlamx1NfmyoLjccGHYY7eMwsZVY86Cv2mKvVae9aA2Sw7d1sd+w+BZ\n0JLWW1q9Ku9usXyCwJ4vW5R6OF7j54V6hMatxQVSRNxc9EW/PgJJ6iA0U+5P\nC+l2UD06E6Ed/lFj+ihL8IAznUXjwzl3hsGn3gXldja4fbiK/5jhwOMSYdf5\ntJpCF3utvCRIn7JTnLhdRYxuQsr3/7WN5zCTRpmBRQqFBQw9FLWSRgaeGANu\n7LlWxggbKDtQjJeZ/LjNHauR5tlHB5wqaFX7VQUoiD7qhx6+/5jAD8VEtGu7\n0mmMLAhnFyXeJkYuisotkbAdDJgHoCFanaXulht5Z4AIrAc1+sY6RyB8OOuL\npyvyGx38AEq968GFveCTZStlZG+ueiuwVk9muJbM4E0FeqbhFlmPP/L/xyr7\nJCGehOOEWweMnQRB/XQD+SkKH7CexDex0hJAlYLkqeCNO+D7xkeKMdot4SiW\nmLey\r\n=7+RE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbNhs8Ty0RWFwHVtAWkn7W/C07sZq+ev3OTetgcO6rKwIgfPFkBYVuEITgMtZmta7q15GcZ/3FxKvYwcDEvPorXzE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.d00b098d.0_1630704452364_0.4624649068658082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-select","version":"0.23.0-canary.f29b3352.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-floating-label":"0.23.0-canary.f29b3352.0","@material/mwc-icon":"0.23.0-canary.f29b3352.0","@material/mwc-line-ripple":"0.23.0-canary.f29b3352.0","@material/mwc-list":"0.23.0-canary.f29b3352.0","@material/mwc-menu":"0.23.0-canary.f29b3352.0","@material/mwc-notched-outline":"0.23.0-canary.f29b3352.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GaG8gmtljqWuI0fLptJGmD6eUr/0dUFk7foXGmf7DYGWOQLs/eZE3mIOZD38+Xw28svD6DfipTwKU2IpjrJffg==","shasum":"5421ff94acf7bfc6c1866448b55ff8d3eec1d9eb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.f29b3352.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6yfCRA9TVsSAnZWagAAy6sP/1+vpdVjKGcf86WGySoi\nXt37Ep1h/cOmFnmj+p1ydP2kiP1HhE+C5eUaKk9XzUcS05x1RyQ/UrXP4cSe\nA//jcK2NwuP3ULvT8Nb0d679R6zpGgnAj0e2oECxm6QuK/JM10C5qKJqc8Om\n+SQ6Uy1gy1ZX8F5BbPaBDolkdGhxTOfLU9pfBgIGUYiMKlP8ZUHY+EXljGH7\n+fTdxEGORZH7HLjjpCDXqVuE5tOpKwZ/OGyQ1yFXAdWyufujNIsGmRYJtqb1\nUle214vd9TdF8fI5JQ7afMi+6KiGETLs3t2ly1IDJzK+LdE0x+MDtEu5sTq/\nCzW8BJ/Kk8UwHyZ0ZhfMV69BgsZJG3fq4W34MRR1YA9OkQ6xsgnine08nW6u\nv1xuuvA+9w7/ZuQ4wHGzPn9IkV2txWKgok6BFtuGtlFIdiqNQrkzXbcNZeSd\nWN2aQnH1Jbba70WZwnfXib+885QQPx/SnenwbHxO1EDuNs8tnULescX/d67i\nlwZaiH6nV20fzIYUCBpqDFXppnHoDQwwEzq9w3W4BxGMzCgBqmK3j9m1oyDu\nSBqF5hGlDra+96NXlm5S9tx2JgsVGl/m97npBEyekyORZ9DB1+9d/xJ6Q/wB\neqspsY9KvUk1b9zyXwmkMtfPSgpOttjGWSlg9kzVq19iMC4ObrYs7Ak5XtvK\n/EIk\r\n=J3Ue\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2ft7ipYvD1L9ADe9JsrXaGrDpoi0ef/PyQwncLqCdEAIgE3uTpMdQrcQ3u+Ov3tCIy4eVJAN2S/tzgeMxZifWmXc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.f29b3352.0_1631038623760_0.0017064273745026615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-select","version":"0.23.0-canary.4962a163.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-floating-label":"0.23.0-canary.4962a163.0","@material/mwc-icon":"0.23.0-canary.4962a163.0","@material/mwc-line-ripple":"0.23.0-canary.4962a163.0","@material/mwc-list":"0.23.0-canary.4962a163.0","@material/mwc-menu":"0.23.0-canary.4962a163.0","@material/mwc-notched-outline":"0.23.0-canary.4962a163.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QlfPdji82KTkQiDl4bSNTu3cfiVt4Y3zS4quNB8NnpmpYmjJJfYKALz8Mbuf4uirmqBv3CXVcOvtemGrt3BPKA==","shasum":"7db1e8a595381d6dd5f26c6d4469cadafeb2c71d","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.4962a163.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/uoCRA9TVsSAnZWagAATE8P/AiVBsPcrjdFs8jKV3T5\nXZAoy2pPwL8T8GQifTsb1F4KtFHJYV1GCdYJFWZDTx0ei69zHanhgcpl8vw5\nPW/OyeRDLnmOKIEfU9N5jcrCIcwDXHDfSM2X+0HBLxxv7irIYEAoBufMhuUI\nnAJqiqhvW2nQImBUG/ud/fsbLtaMSBZKJAraG/AjCXd2B2jzmL60VzkOjfUv\nirc7RTN+QfebLlahOgFu7ELeTD1X5Nqf8L3fm/rnNA1guTGlD8wQA9mzgFVe\nCrDe1wwwKKSQzYTHO3A24lOgRowKtqMEbarA3HRdjzBPM8TQIaLPedo8bPo7\nxyujbnhoQ9gg1JeRsL3Bbp8zdU9yMAtAarxeJIm5ODySuCyCgwOfQVahe+Ks\ngPz58eG3kduZU/5iSXWGN/8H9Dn1f1ksYIhOXAir/i5kw+AWSVQruaLFtHVO\nbi7GT592Sm3pszQQRFFr1eLc7Pla3TCYRXOuwnwY5tM/93mYQ/ZM0h62S0NC\nSSSSggCXb8cjm+vwMwlqxYafOrK0n0Ajl/npn25PfWyzBv05zkxAmJ4esBQf\nmBAXw66MPVQuE4J1XE2N9RCCkO2Clau/9wxwx0ScrpmLSTk0uqW8LJfgjGv1\nZYRurpLVmxGMFO7DY+3hMF8ZI5L2y0hsh2PVk3Cz3VJSbFddnXoATjHTyuvw\ngjs7\r\n=xrdj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/bCgi0gYUJ3sjO2KG46UyUx8kvyAdS3mQ/ZA7cMHJOAiEAvNpwvK1q2TNvPKYz2lRDitkwxjMbmmBo9oS/grdK0TI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.4962a163.0_1631058855952_0.3737939355197559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-select","version":"0.23.0-canary.33102bf4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/floating-label":"=13.0.0-canary.15981e9d9.0","@material/line-ripple":"=13.0.0-canary.15981e9d9.0","@material/list":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-floating-label":"0.23.0-canary.33102bf4.0","@material/mwc-icon":"0.23.0-canary.33102bf4.0","@material/mwc-line-ripple":"0.23.0-canary.33102bf4.0","@material/mwc-list":"0.23.0-canary.33102bf4.0","@material/mwc-menu":"0.23.0-canary.33102bf4.0","@material/mwc-notched-outline":"0.23.0-canary.33102bf4.0","@material/select":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hsTvaimpCa/RKeUrAa9gFKw2hSWjTmkMnI5ZQJLXy1KS1vIn7I0GPeXYLiOt4KMp7R+vRbhYlw4GzA8WBYv5JQ==","shasum":"29c26b1f7ac4c701aa2407d498ff92aea39d54a6","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.33102bf4.0.tgz","fileCount":13,"unpackedSize":204618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOABjCRA9TVsSAnZWagAAADgP/1u27gt9zUi64cWcS/Oy\nreu2x6bHwupeayQy8GgboivG+fE42pKy/rqvzyFBKgHOoUsImeWjYUz529b6\nY8KC0xfwqj4uiUiF4e6Z9/DrTzF2YMIbk02iZbnUM9OMUgx9I7d2UJqB2chQ\nT+lXSsVuwm6R1qCnMrBrZof8BzcUOHs9kGx7Q/kCUqDzinXfZduYnAG78NBc\nC/hwImOlcmILShfJqDw4ItE53C3+bZ7qV48/43RgEUp6TmxU0DMfKdrbci+c\njMz+wbBQD75PNIYYe6wtPWM9rS29ZhP5pIAADp4/DQzbtdR5JanHLv/LzAM0\nVbpWyx9zRa7ZShd1uz9NgghQTHHl8tfbyRp4zjCLgcHMFn43pE9htXrMT85M\n7bJ1IHxNu8OTqS7kvZe/h4FM5wgWbTTEhCNMCpfPDPL0+Gz2NVQycMWs18UT\nDkYHQWO2EELphjoMdeEe7Tfo8LSd71gEe3bkhXeK04vnEAxn7PdYPaY+cM9T\nfJ+wzZ1SN8CWWeckjmcvS/8PMJTDiOZoRrywV9jnt9qBW7ASpwEUUY9ER8a+\na13U/DSuOHkr7ypPUQeaeFHip1dG/9DzZ1wVZCrtP7UM6PYSkPSseINSIiNb\nbuEiRVvr8qDE5kv5If2mqxd0HsxbeBgv6FyoDYqZjVTxPtrxAo3PT8nWwHTP\nOmX1\r\n=JDnE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBupWwA7su9wajk+KJjel5eYQ9FCly1sdxzbQXjOn0jDAiEAmpuneXz/EaqbJSmTwQBm3ayb8wWDdJknCDeXrg2EUEA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.33102bf4.0_1631060067830_0.8576224471642915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-select","version":"0.23.0-canary.76c68381.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.72464476c.0","@material/floating-label":"=13.0.0-canary.72464476c.0","@material/line-ripple":"=13.0.0-canary.72464476c.0","@material/list":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-floating-label":"0.23.0-canary.76c68381.0","@material/mwc-icon":"0.23.0-canary.76c68381.0","@material/mwc-line-ripple":"0.23.0-canary.76c68381.0","@material/mwc-list":"0.23.0-canary.76c68381.0","@material/mwc-menu":"0.23.0-canary.76c68381.0","@material/mwc-notched-outline":"0.23.0-canary.76c68381.0","@material/select":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kVUquyECL4pyCQD/EJkOAiRo5y27FeICbkLl70hNG0QIkk12own8U5lMym7RvZi4U304MFf1HYyJArqV0+/LMg==","shasum":"ab4b1146bc4939c0d051b12941f541ddb8e270a3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.76c68381.0.tgz","fileCount":13,"unpackedSize":210762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmtCRA9TVsSAnZWagAAp2wQAJMfLCAB5BxqgZWyHd3I\nMjstisEl7EZ1GnNk0953nZtvP040+OB0OKJOWg5ggiddHgAZ6Okxehcmc2J6\n5BOSQRWsBEQ65YclMuaFJFbAS7Nh3ceGlpx8IjGiX5TxucyE3qGrPOTq0x9p\nQgfmbykbcX/66iy0kQ5hIH+/DWPxHTzZ68w/GAySFLzanS+bf31Kx8wH7T8d\nDG6dlsU3TyI57I5yWYrhWlqVHPWm0g8xhNEMTR7C71A2BTrqFL0s05KPADkN\nEWHWKm8xBhay81WU/Q2DiHMdkBT/R2a7hIrKVmaJqnkLfpoh48dV8ePPL6PA\nWrz3DtcHM66CpTAAq2OZX2k8c3Iz76gOULw9kPgev9/bocQa5gx3n/HNvyAR\n8cBB4TsqPcOIJs2spI1EaXliUnz/1hvkQo6A5dYQo8DKlsU977CCyUb08f09\nJPIyVHK7L4VEcXlnaa8mTdX3en59F0bg5YB+O8Qgcy+sTWQOx501AVtFyyRs\niuJfwp9CjRQ5tFA3w235flmlO90fOZL7U4p8dJCOB8dm8EE90WeMuylPvJ3/\nZ9XXmVhCmVIqfm6IEnvxANqyJSpb8GSzWZ9OTLZlgXtLnb2aZkWUcBcJZIeA\nyNzVBPApmFYUuq+49bB2xAPI6aS86Utq5BRtVYFWGhrJYG7wosNO0mCzUdXP\nrtfW\r\n=upE7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIClstpCzHxto7M592i+kQxDEWITG9rcMvQG+Vt8pKb7wAiEAgq2rqU5DeoR17F9jXH2oU5rbBc/vksr5Iyzaqi9F2zY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.76c68381.0_1631132077194_0.40544389428285244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-select","version":"0.23.0-canary.17d51f76.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.72464476c.0","@material/floating-label":"=13.0.0-canary.72464476c.0","@material/line-ripple":"=13.0.0-canary.72464476c.0","@material/list":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-floating-label":"0.23.0-canary.17d51f76.0","@material/mwc-icon":"0.23.0-canary.17d51f76.0","@material/mwc-line-ripple":"0.23.0-canary.17d51f76.0","@material/mwc-list":"0.23.0-canary.17d51f76.0","@material/mwc-menu":"0.23.0-canary.17d51f76.0","@material/mwc-notched-outline":"0.23.0-canary.17d51f76.0","@material/select":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LJn7ZWHqLykSuXbztXdh0GESwe18iRl1GrYAjX4dMbOFNABrz4liBpI6SnNKdA0B0v9+3Qmj/6Zm40MGNpG3uw==","shasum":"f0814b036ea47d26dbb231260026ec5252213d89","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.17d51f76.0.tgz","fileCount":13,"unpackedSize":210762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUbOCRA9TVsSAnZWagAAjQwP/ipmNCtDkGGyMQh3+eyC\ncXNeN5UVjNJ/yZ/vi4QAj6w7fxQrY+xtUbES8+ysFsI20Glqqh5dhM+QxlTp\nmQDxBhhG/DqpqF5dG/ssJJrMqDb0H4c6i5/ZtWXodtX0MecF3SYWlBdcE1Z+\n5s9NeGRe1tlrpETyRbgv1K9EhNUIL2BAYUgqpz25eXqS1DkQB9+cscqambtu\nUojo8EyYcyHba2tUckpYF89/8LzBWB5Fz6p1yzHEABk7a8iU4ISZ7571epCl\nEE+i1zeeWiSei7NZdU21O/2hp49Fn8IZsKTn+Y8zcaSbgnnuUSZXzvt1N+Ok\nlDdiU6N/9ieMN5wEF7NkndT3Ka5qFxiFUFkUwQaNuFNudYgf2bj7Mw89HdwI\nC5sObOKaBQhlUJ7c+rQNudgjfrBoo+mISB0ctwtOJEOYwymz+DtZUmFsxKei\nDJkvKaFnGLikIPz2DaKC9/YYtyDrfN6s2CBNAhs5pcz0MmFqROLQxqP7xgeo\ndtTjnmiStZFm4oYKJ18KH8TkOAbgLUE1RJSOKvimGeJpS9egbe4JPnFDoQh9\nom3HbbECDiQk/RJbXgF9/6z2xAtOHoxwXDDV89PVMn1zMk6c6b65YtJ3D8NC\n2Sv2EbppCWtITR3wjnXSRzMmgInam/NInPZ3uM42RHw6JAROJeMd73SZBBje\nkPIx\r\n=rjht\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIARj5oKRWVHd6Zt8GKng+W5euhEzv7kSBBetIxFHYQKTAiB8Dg9yZcoNu47V0ioyRnhvrBqXTgeUInRq99MDu1S5mA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.17d51f76.0_1631143630229_0.46733888195234585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-select","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/floating-label":"=13.0.0-canary.864798678.0","@material/line-ripple":"=13.0.0-canary.864798678.0","@material/list":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-floating-label":"0.23.0-canary.3fae6c2d.0","@material/mwc-icon":"0.23.0-canary.3fae6c2d.0","@material/mwc-line-ripple":"0.23.0-canary.3fae6c2d.0","@material/mwc-list":"0.23.0-canary.3fae6c2d.0","@material/mwc-menu":"0.23.0-canary.3fae6c2d.0","@material/mwc-notched-outline":"0.23.0-canary.3fae6c2d.0","@material/select":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3RlQwjWrFJJk7qbKgYla+VqZCTZRhFNxBMH8zti6E0LasXxgUEzLVETmvyVdL1vwwRwsKkgDyXd3SmktMi0GQg==","shasum":"73f863c256f0b5ccd5bd278db2482b69a841aa4a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.3fae6c2d.0.tgz","fileCount":13,"unpackedSize":210762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6UNCRA9TVsSAnZWagAANOEP/iifZCwgAq50k0GoeI0h\nvh8dIZ4knE8rXmPG9tslwDt9djbktCr4OE92Qeq6GToBHQML2rnbvrEvlPEh\nvOMY2Wku9v0ILz6cnxyVR1YiiUokDPFhqwyh6m4Rp9fHqspTqofvrqs4D36P\nEMUkTkN9+4+wYTshv8PYnzvniLVxQf7zQPYePkC5rLzc95ZrrtZ+GQx+TdHV\nV7TYHZrZpUyEVZTU86kCbCp5lE/SkzE2ftujdhXFuxNNpIy2TE9ETOjOMF2K\n0NE5ZPPN83vK3YAu7leQAkb3GHZL9YASEjUr2fNfXPk9LWf1ddaWN1DU/FMJ\n69o9GSiCaKU38TdmnYZ+0eQo192JMuJotMV45h2Uk/2mx1lNpqLVXGpNOLzW\nDXGICOFoHvNyK5YBmw4wZjl8oiwlJmk+v9wBS9AYIqkm8we/p0h1k/mvv6pE\nWKL6DtBmBgLa2oqAHTt1tlOOMlVW3JfW5EWf4cpgOElZRTVV+249OksSkoMq\nQLEHSoRtd7+ifNUu/RN7hB9PxiC/Jg1uD3H7D1rACLUOq9lAkFySApsLsRiJ\nCQa0EIHbqJkCzYVF/WSHuvgbAXb02F7pzDmQYB6yYf9buUDwII3ZR9NJ2RYW\n7K0FOuCMjH2PfkbD6JlkvH8XCv4ApgS7Omxf8FxkgV2NUbRwPEvqA3qm40cP\n11du\r\n=sM3I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgm9Ci/z1ZSVrOcBi+GHzyEckf7CPGEIse/Luru3o5MQIhAKE0sk7uYSfNqCNunr9h5d+EYkfHXSza5OZkbM6SYhuU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.3fae6c2d.0_1631298829239_0.8262437327060481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-select","version":"0.23.0-canary.f1958c4b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/floating-label":"=13.0.0-canary.864798678.0","@material/line-ripple":"=13.0.0-canary.864798678.0","@material/list":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-floating-label":"0.23.0-canary.f1958c4b.0","@material/mwc-icon":"0.23.0-canary.f1958c4b.0","@material/mwc-line-ripple":"0.23.0-canary.f1958c4b.0","@material/mwc-list":"0.23.0-canary.f1958c4b.0","@material/mwc-menu":"0.23.0-canary.f1958c4b.0","@material/mwc-notched-outline":"0.23.0-canary.f1958c4b.0","@material/select":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GYBMmUR/cvvnQuusZcxTUbR17LYB3yBGcwcb93zCVJCKhC2xFEVQEip/eCJvnuWTgMFLdKmJ/NU1fdZzBkLlow==","shasum":"3fe5b49baad91322be0c37bf34dfbfb41b3e59c2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.f1958c4b.0.tgz","fileCount":13,"unpackedSize":210762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6S/CRA9TVsSAnZWagAAL7IP/iSEwLRPdGdWBBpAyWRK\nh8mFBTgt6RZnhPGlVmN8iwfRVir2duF2kGNDuLHDeHCOHM8WpiPn5q5VYQ7N\nuV7HPSlziUvsrXCHrUqWGFwACA4uZscmgs2Kv5Tff1RV2kozmZ7dG3AQUgsO\n6d3tg8yW1phfuVr/jqXOt54zHB6zMPtWe9XrzmMW5+ODEef+cyOZtQg2OUbW\nJ4uQZdxVnXE9bXt3tvOjsczoTvNXFmbfmIdbZqVcfvhcsGBXWd92wELyTGEg\nGMD23JEF5MxRHdIRykvfhuGKC8A7wokKlfDkzvSG8CjxVphlmi4vlPHCMtwX\nYaPhBHEtOpbJc8Lrnk0XdeUCWCI/wl7hvRrD/5SM1edc+BdGottTZcHAmDru\ncHmEj6lbY9soyBTeLiA9F4YnaiAru/CXuOXIF4lITR9k9j792OfWyCJK6q8O\ngByWF2aOdicWMR03SsfqxWPlcZFY1rH96liPrym9AYsNOdDcTWzVZU4Rb+rf\n1LFe3zUuHEETJMacPv/thj2NnDTCPLQ0uK41EK6MgmLI3RmCx0n6cEufnTEX\nXx1Nv2MMIL4XX+qHMMARxMWCCbKNJ/V2Hwk81b0G7bIQ5UMacr4KhrvJvz1N\nzUh1HAPGhuX3Djf9e3+WSqXZAGbcWiMSPIRZ3as+CEqY7WtxQh0ZTaB9o5Je\nqNZe\r\n=QEh/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOibZdW+IRWag+r79WD6AuztJ1+4m1aXumRsH0tmCm7AiBVHBIW/T+ggidgn/0P6TJCnT7+pmpGhmWmDpVE0I0JpA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.f1958c4b.0_1631560894999_0.5486550661366381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-select","version":"0.23.0-canary.78abbd59.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/floating-label":"=13.0.0-canary.864798678.0","@material/line-ripple":"=13.0.0-canary.864798678.0","@material/list":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-floating-label":"0.23.0-canary.78abbd59.0","@material/mwc-icon":"0.23.0-canary.78abbd59.0","@material/mwc-line-ripple":"0.23.0-canary.78abbd59.0","@material/mwc-list":"0.23.0-canary.78abbd59.0","@material/mwc-menu":"0.23.0-canary.78abbd59.0","@material/mwc-notched-outline":"0.23.0-canary.78abbd59.0","@material/select":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-64lYdkbNRED0LIIMSJyEyfZESaeXVO/6i5WRO6qOLBvHC+8AL7N5QI2QEjx6TqcJ86QIhphUX7WF0MP/snDlaQ==","shasum":"800afa175b1db89bbcb700839417de8bbec0e4da","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0-canary.78abbd59.0.tgz","fileCount":13,"unpackedSize":210762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8IvCRA9TVsSAnZWagAAPuQP/1F63hcT/6RYAM79dsEy\nOGFaD+LXu0jlvsqTv3mYrw873P6XUqtBZyKON9YqHQA7BW5DrbXTKWg3r06K\njRHTYlYVjXU3l/1BFjyjaGfXc5J9xE2pvbkrfWBPKeQgappTSJzA8cuLVMOt\nWWeRKs8+Yl+DQ2AUiNP4uk0THtFYKUvvboYv5BaFzYhoTAaqmTdm2yfbBJUL\nmj3f6Ykjk+AxnGrme8yRuinPc7KEK+O6pmlb69OBYz9M9rnoo29chrU7elWI\nv4LFnAI0Yg1JIkEjUNhkRsk5kglDKT0/0SKFByJ0kR64GyQ68bDL90qiC2hT\npN3ltrBSXfe0cYPqntT/TMJY+yw0KePAYM51Jf4YQXzqZ45ZoVrK+A8hC1td\ncto0v/qjloHn8kYdirOnynVpyioV4AMZMuCsDojgs1LCrvEZQqgvnz8ZEg0Q\nbC78rzUdRgaKyxo+kjpvLUDd6OQe45acJmwGi8qOngHkbltlqPjtGZWeG0BT\nqAE2PKd5+viS1V5R/zZ0D/tbv1k3/OUYhcD4ImMZXcJy/tLOYf8zo1t82/WP\nE8xy0hQ6+PYn/Oijnic9+B0K8yUly/J3yd9iB7TTwkD5My3//mS2cl4JsuCC\nEvqo2MD/XUDf6f+8/Vpxsp4OdngfqqsgJ5z48UBOeMEK5vadK3bfxhKT0Bws\nZXhp\r\n=zTF0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArvLqe/5QJ6vAmO1e/w7TD9ageixExJ5HCdk/y+OgivAiBslJFb4HqR1M3ywO8LkcKjC1+grUiYu5Xl5q3hSRMxLA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0-canary.78abbd59.0_1631568431774_0.9944912415539757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-select","version":"0.23.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/floating-label":"=13.0.0-canary.864798678.0","@material/line-ripple":"=13.0.0-canary.864798678.0","@material/list":"=13.0.0-canary.864798678.0","@material/mwc-base":"^0.23.0","@material/mwc-floating-label":"^0.23.0","@material/mwc-icon":"^0.23.0","@material/mwc-line-ripple":"^0.23.0","@material/mwc-list":"^0.23.0","@material/mwc-menu":"^0.23.0","@material/mwc-notched-outline":"^0.23.0","@material/select":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-M0zGAeHteeJ2WIqHOB20xPNZwTCX4D7yFF7IJ5UpJGWImPmQHuGrrFmhGwwh/cKJh9v4Klvjw7um5xkSSwilsw==","shasum":"5f9610ef7567396a2962e7cd2f1ce16c3521bbb0","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.23.0.tgz","fileCount":16,"unpackedSize":295084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8RKCRA9TVsSAnZWagAAcGQP/0aO4LBdxOYvMmO6T7AO\nYYHNUzpc2bgEtDLRYVUUWQKd+XJlt4y5MhV4AtzWQ08RmNy8SE4Vg6bQChsm\nLsmREdTVgNIMNDWyYv8AqAykZDevOpquBuU+1+MHgAFp+wuj6UoGSeYfyKJR\nQLuAtf6vh15emqfM6O5mbA08yhpBS1YrhfX2cpNNauR2DDIY46zleYcvBanQ\nnlU4hsiDYDNEkoxgCUPXFSVf7CClr+6IhnRZ5+D/Pz8luX7a0VVRFyW3b31m\ngfq6Kfb3mzcinLjOHbSW6I5aC04sCDYxU6PAR6NCiBvDYi3gx8uNEsyOg4+a\nK4QiFgkWX9g/ZdyUMIODrkm4JsIPWabC9HxC0FqoARBOqjrndUh00AB/etaR\nGOYRvqvmNmcZvcui9oLr34qXH4I1F3ckc+6kOxi+xnuq15JiTSJRC1UeMHkG\nAyVmrgL33SYzrqjk+9JbESZVSFdnBzzW/OEJunpyjrz1mZTuihkuh34DLo2j\nvFP2Z6Ng4F8V3DoRkI+pfn5E10dRT9P+MjahU3RTUJ2/vZneXynbcEKTWRas\noJ6JZKPQUV935okZFRQVKJDMQHNM0Y1cCCcZExi6EWYrTg7H3etSTBmFJeYI\nkIifP3q9mP9zO5KsdzGqR7k4o0+tJB4/LsdA7zbEwAHsfdqYoWFCBV9J6Upn\nYc3r\r\n=5i29\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDM6gb3Uw6at/wBQH8dnScYDSn5pGH8GaONBYnlGyaqMQIgW5SIdgpzSkvZYir7r2ppiSkkb19u/GNS7E7SIlAaC3o="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.23.0_1631568970165_0.06953137485117256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-select","version":"0.24.0-canary.9830d665.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/floating-label":"=13.0.0-canary.864798678.0","@material/line-ripple":"=13.0.0-canary.864798678.0","@material/list":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-floating-label":"0.24.0-canary.9830d665.0","@material/mwc-icon":"0.24.0-canary.9830d665.0","@material/mwc-line-ripple":"0.24.0-canary.9830d665.0","@material/mwc-list":"0.24.0-canary.9830d665.0","@material/mwc-menu":"0.24.0-canary.9830d665.0","@material/mwc-notched-outline":"0.24.0-canary.9830d665.0","@material/select":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7HbO37Kt1MInQ++f3ZiUf22MA2tT9sRrkVDJDqo58ds1at9ki/B04psWwSi46akqNf1vkRi8VO0QBnRGnM6P4A==","shasum":"ba3bd7ed0613f6044294b725bdf12e4024852c5a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.9830d665.0.tgz","fileCount":13,"unpackedSize":210762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8S0CRA9TVsSAnZWagAAsDoP/34XYCtuZN9qeQHbvULn\n7e3pGSCE/JtWl5P0TIIIowSXBVWvq7xSI7V9uZRjSs/viirVVjoATC7VsMK2\nhARovCkYLifZ3Ts4VRsf8hD2pUHONHKbqcwyoxQ3acwIEqI2lsheME8s6hDg\njVCuB8O2ZZmF5DwA6FKz2h7+VfO5gWsyI4h648KGRCuX7eyO8nujzm8c4KKc\nu41+J9um68CMjF8mD6YSO9UDuJX8B+csxpfxTAMFYWrINBwsjkPsEiD7L1EK\neflqXKbB5lBydSyHBrA2/hZw2ohM4xSc7u/Wma4UBSWre4WUngvi8m1uNxlU\n0/QNpxzrq0/DB4NCw3DccVgtk4pd/ccYLqygP3MJvrTjzFWhL/a2p9OYMkbL\nruzATyYQM294Xnmui2sOcEgUBrMvndGPiJqCYEzcJJ/G41VlBZHueByNier7\npQtQ6ZR53nIvi5oXHYRPJW9/kxbN/8OuxpH/WQJYPNcnNFURGe2wRFF7TrBA\nvmxHwrNL6yvtNviLjaQ3QC+Vc7sCFbaMlWRVs2oFvIOH4qOsdQbagO/9oXQv\nuefZjG1VKEaSyUih/snjOcnI+zOzGT5LD+tITszcP6VL4iK5Qh2Ny+/BwfEF\n7ZxbfWC+28SIDf0vQtOEYTvzmmxBiuy/6MSVY99FuQsvT/7JMJLyVZX2G5Ih\naisV\r\n=qJMO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIII9Oh18swhVHDEGko0b9DcejFNTCJqTh3YbDNKf2egIhANywV76dNpgT6TgaP7O2d0ZglefLfBhLUiu+6HyaoviR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.9830d665.0_1631569076470_0.13680534355911544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-select","version":"0.24.0-canary.20e2081c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/floating-label":"=13.0.0-canary.864798678.0","@material/line-ripple":"=13.0.0-canary.864798678.0","@material/list":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-floating-label":"0.24.0-canary.20e2081c.0","@material/mwc-icon":"0.24.0-canary.20e2081c.0","@material/mwc-line-ripple":"0.24.0-canary.20e2081c.0","@material/mwc-list":"0.24.0-canary.20e2081c.0","@material/mwc-menu":"0.24.0-canary.20e2081c.0","@material/mwc-notched-outline":"0.24.0-canary.20e2081c.0","@material/select":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YsPuGCqozPWORWmTBf4Mhoq/OgnllGqIx4I6xfAObpe3uMRgdkUh+NujjNYVTya3gdZ/OTb0sB1JR5SrMfAhiw==","shasum":"6978c3a504d4c38707c8523195537fe33598443a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.20e2081c.0.tgz","fileCount":13,"unpackedSize":211112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+vCRA9TVsSAnZWagAAG3YP/RTccYo+G2qO6Tnm05fg\nzi11lQK3oPlyw7uJKTlUShItHsUF90DjXaGR5rqDxTk9zA7B9rHApP4PhFw3\nh+U7/VzMSDwpawXKnYal1kfHXKIBSO41rS6/YWpq7DhtoxNXaMLtbqoZU8oB\nWudBS6gtRFiEoHz+iwrIW90ghcoEO6xprXpEsoHUMhg60kfcyvg30fPloANp\nBvel2L0iKvDiab7Cww+WUYSfCBcBjhc5NzIZVJzwgwuAobGaaqRxNtTS7NyR\nodmZtdRmM/z0HTCO/5bYc6oqI3pAUypNe0BiZXHRww7o9P5pYKxb3ISyi09p\nlt6Llc6K4ngt7Et7G9kIXi38t/3UQs3jzyr8kEmyRRowsOv8zzzl4wntFQ/L\nHskA5Kzs2P7f1O+wcAk4rwYZVE66uRQ9d9MdvHNkEa+A2xXMlWbFhXHjTQXl\nvrz5cFrAqVbxzsNAVRXverNa+p5zh5O04zKpN8+Zr7FasZUGtW6Rvtp3plNv\nsm6eqS9YruVwYJ/OqdBKzORPkbxgIXbJXjmTy7U3KHKfo+jlD1GiCdF5lFz9\nCcjHYVNZpjS9H8ZrzatdYFJrpu9mQ2lQsisCjiE4bouGJEBdr1k4BuettdCi\n1i461SPW/tWHBNZgtr6SrRO1J7CcYmMrqDohIiHD0BJliqYNXcOPbTF8c0T/\np/uX\r\n=SKGa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCs/0tXRbk8NIkNypGLIjBDdeOtvD92NijH4i3g+9uoBAIhAJG8tL0Ela2T5YRgVuU020/V/MbyQEeKh7zLrKfOLjyk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.20e2081c.0_1631575982960_0.7730141437782194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-select","version":"0.24.0-canary.583613a9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/floating-label":"=13.0.0-canary.864798678.0","@material/line-ripple":"=13.0.0-canary.864798678.0","@material/list":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-floating-label":"0.24.0-canary.583613a9.0","@material/mwc-icon":"0.24.0-canary.583613a9.0","@material/mwc-line-ripple":"0.24.0-canary.583613a9.0","@material/mwc-list":"0.24.0-canary.583613a9.0","@material/mwc-menu":"0.24.0-canary.583613a9.0","@material/mwc-notched-outline":"0.24.0-canary.583613a9.0","@material/select":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NKnT1ugk1Vf7rFFHO4MGBobZW5sUQ0b+0ksiarT69GR/96jyZ3maIW34ObF9SbSjnFBx8O8XqRG0ia6Rh0lfrA==","shasum":"a487b35a3171d8605a78c1c166a09bff57ef85c4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.583613a9.0.tgz","fileCount":13,"unpackedSize":211124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQmCRA9TVsSAnZWagAAldcP+gPeGgnEpp9O1lUxhGtY\nZFANX9nxpeQu9fUeK5ifIXJdtCXEWFJBcJWmvSANu2bz6FnHDJpqGkh1lywb\nCLG4DGWtA4d0ZUnJWnjj0Hjsj61Zgpe6Ktj1h3VD5QFIbTmESBamQb8/gSap\nup3dc6mEzmY/+h24QHHEy1JokZmWR5EHXW/ppu+OZVZfRoil/s+KUJNrdk7R\nA1TANPkpPmsVxteFj2pUXmEl4kIqDPjzmFFWaro8kFYn9ff6IW6m/RX9L4di\nkdO3JgUI+1yP3HV6Ni/c9G334eLTwfD3Gq1WM8J6cB9XyIAou8G1PieXnZAZ\nVPfOJ8g9CAfV3CLQcd76t6GTgQLyDXyBD3JzNPSPEvXumzk/Z6isTlLU5wkn\n8HQTgj/y2nS8bcHcGIDwC1nNv4nytVMsYMUups05ND80Oe8JpowS+FKGDfQb\nguOZHhZ0sqtQXP8miczMIqsBYKFyMX+jyWWnbztETIQ0ABTqHpO2kxOt0WKi\nBav5oQ/XEEqrC+kM3PBwtXw48G80Ejem+t0TadMtd80iRStM7ezib99VnsPk\nBYTsJJrbz4/qT2ikSZ3S6LWzTGCB4v4vdIFHHMzpYNbNE3z14ocCYGun4zG6\nVJ6Ntkbb4yMRCQGTEi63UDvjR7+/zLmgpSwDJ5TpeiCKNynPASmkd2/KrJVh\nXyVi\r\n=aiic\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDIapYfcc20BgEA4gY+Ytw+WLKtOL2I75t5LYOEONOx3AiEA3lLgtDGTcPY33JtYJPfk1xp+OXT/X5F7F9/StRQOhGs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.583613a9.0_1631638566653_0.07542680514047317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-select","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.08398f880.0","@material/floating-label":"=13.0.0-canary.08398f880.0","@material/line-ripple":"=13.0.0-canary.08398f880.0","@material/list":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-floating-label":"0.24.0-canary.0e1bd56f.0","@material/mwc-icon":"0.24.0-canary.0e1bd56f.0","@material/mwc-line-ripple":"0.24.0-canary.0e1bd56f.0","@material/mwc-list":"0.24.0-canary.0e1bd56f.0","@material/mwc-menu":"0.24.0-canary.0e1bd56f.0","@material/mwc-notched-outline":"0.24.0-canary.0e1bd56f.0","@material/select":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Gf6Bncw4wlL177ORBWtXnEfDabl/4AZps8iaDTAPTBLmVYw/xJ0c7rmikQRP2BR2eepI7Xl/L2X7KB/zC/CmLw==","shasum":"aca816363f1a3126763c1d39d62c98f795495157","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.0e1bd56f.0.tgz","fileCount":13,"unpackedSize":211124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNzWCRA9TVsSAnZWagAA5AAQAKILtOp+e3U/aAp87+lK\nnNZYCUw6yV1JXiYIDt7uoJbooUKZhXYiFLvnwGzCZ0IjTAMGVsGkCYQoW9IJ\n0mokihjd/FEqLCaKkRz7ucQTVEa8aaFzEvHJ1ek3qO85S5iGOUh/hEl5DXlr\nWIImmEO3+86218u2kBOUegrFiRZbLFMF7gN1vwdAIGlqhEx2+64MQrgbz3CL\n1vajNtR6TXYjhUJFl6bnxpZw7mhPrWwKQzCkLkhCw6Hm4qCQDCsTFaRPfq/X\nexbakvu0F5avdpt2JDh8PUkjxJIAHzT9OhwoZ721C9mmDti9fBKbXM8fEvkE\nf/yxmtf4nFquZuFM2/Mxd50aQ7Icf56sRpcl7XanIvLtp8iPosYnJ8DwPrEq\nqb1hdAyCtWaeAdTkLT723f6zY+yZlOMECWPR1wPoxQzPjo2jYiG3IY5oG+NS\ncMcvuMO4HI/FYpG9thwiNDJerGwWbzeD6PwxcAsMTTVW0W3zRwXTY0s57uUX\nqeT8DuAN/adHpq3Vd9SiCXIvh5gJOZ7uem/K8ceQmRDciQKlmGmwU3J+MRSm\nxe9lrvunek6r1d0vJSyyIJfVGf8iL7pj3ySNjTXJK9bevHwBqMvjBqbNd8Bu\nnR7glBxkU9jJMlMIZghLE2bx+dq7MhlnONDvD/mh1u3An1Bnkj1ctBpO1v9w\njhnj\r\n=Ci/W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWpKDvGmIAnZxH2W12EjbYKFi9RKYsnjEcY7pUrMdn8gIhAL5LsIQw3pbTCd3ikEEfC/6FreKlaKoOHDgaor4VpaMF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.0e1bd56f.0_1631640790141_0.42483393787275747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-select","version":"0.24.0-canary.7bb1818e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.08398f880.0","@material/floating-label":"=13.0.0-canary.08398f880.0","@material/line-ripple":"=13.0.0-canary.08398f880.0","@material/list":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-floating-label":"0.24.0-canary.7bb1818e.0","@material/mwc-icon":"0.24.0-canary.7bb1818e.0","@material/mwc-line-ripple":"0.24.0-canary.7bb1818e.0","@material/mwc-list":"0.24.0-canary.7bb1818e.0","@material/mwc-menu":"0.24.0-canary.7bb1818e.0","@material/mwc-notched-outline":"0.24.0-canary.7bb1818e.0","@material/select":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SMTft1o4GiJCKImwyOUwn6KUzReBHwPdAbIbQqkZ9LjGah9zgAt7c9yfYI8axFD49wCzBXzfw9YWf7HdHdtLMw==","shasum":"2c526fc9ee9e0a8b8b1f809b2ee58f4db3d0b770","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.7bb1818e.0.tgz","fileCount":13,"unpackedSize":211124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQUAcCRA9TVsSAnZWagAAl5cP/16ViamOaEtgX5NGaZJk\naBkHdPvDxPNE6y6EAWRQWtFwdYz/M9eugV+A0rrmYVxyZLfDUc3RSvzxpQBg\nX/8nvt7x2pJVlPN4bfnSwiApVX+cFi/xTHJtoub44lUbhrhYiNKHbAEx2MQJ\nWmA3Fm0AfPz5wnsQkPa8dN1Y6q07tAXF1qOGUsCdjjpMW9TKPm1S1voRBIN5\nI43mV7v+8MI8RGvG9zzN9fWSdhGiJ9m4NklzaygDRM61UUwLy7EKYc9WILug\nnToPEN/M04oPvttaWvSjxaF+aqaHqVHgAwK9MBJwLMJIRIL9RwRPtlH6rcUX\nNu91wV7HCEZp4i65clgEikDY25HZ1aqQ9PTBpqbk3gKShy8KZtL6H1/u8C+P\n8HBgBcjPvMzvKvV4CqC4liGjT81WTE4VFLLV7fczOWFZplTv/Sngc5eyeTRH\nzCf27VqX5hpZRIpNppgX1ewmp8zI/GzCNtVmQC5xCAWmSWCkNNrgdDy267Wn\n1tLwU5DVxQENi1Ly7Bg/kzHubxNfC377GgaNZ36EpHv3JHWyXoUd21xTH9/P\nS0hvK3dSRaAG207dU8nLpHOvRq23iBOyA15G/7uvkJIAWgegN200mMoQEDm9\nu6NYTUa4lIYiaA9HGRIUdRgqNY71Ko9esXRIu/SDWpM5F/6iMim5b+xAL+Cs\nf8bI\r\n=cDNp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWL6YyOlDBTOzCjhL5TSz7t/QBmb0AlMiGmFqkve37KgIgSZN9iqCeUzY9k6equGHovcVtDT8uktKJWDWvyQAeWhE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.7bb1818e.0_1631666204660_0.7239238467899247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-select","version":"0.24.0-canary.b5e665a9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/floating-label":"=13.0.0-canary.818f4ee93.0","@material/line-ripple":"=13.0.0-canary.818f4ee93.0","@material/list":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-floating-label":"0.24.0-canary.b5e665a9.0","@material/mwc-icon":"0.24.0-canary.b5e665a9.0","@material/mwc-line-ripple":"0.24.0-canary.b5e665a9.0","@material/mwc-list":"0.24.0-canary.b5e665a9.0","@material/mwc-menu":"0.24.0-canary.b5e665a9.0","@material/mwc-notched-outline":"0.24.0-canary.b5e665a9.0","@material/select":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2a7XE+kP6z0CE0z3A2+Shc5Xu+GH4HOhkSwbr/i7pL442huv3VItrWfGa9ivytP4DTs1SMtSWev2rRQjfwcpXw==","shasum":"7a2630de49e275f4ab3b613b52c93db23cc46771","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.b5e665a9.0.tgz","fileCount":13,"unpackedSize":211124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjfrCRA9TVsSAnZWagAAIogQAI6cOUH/2mB2i6JZXuP4\ndghuUOgyta7fGppopCCgSNdvC4oVYI9F5RCtotUDh61apWPZvzuVkX8TGMeS\n94cx25moHWCmJWQcjFm6vKM2GtgP4ptIFqHPhl/agDgb9jsqiauEgLB5yhMy\nv9c1xjOOt3JRwRuyzJScWlb+0HK5BELzIXhXWPbq+IN3A9eVgyz19xE9B5wY\nKwdx0krxBKWy5C/pfjjWjpZLgxOCtPZoohM1yq385pOObf4lZr6qv5OtggYH\niz4flWG+9gucNGknx5jhvKK0F1rgqJKBXSyvJsxf083j0rMnRJGzLWe2AcHj\nO3TKzDtMci1ybFSCwWqnKWieK2VCZ4Mr2VZihltd6CnuezUvwfLZ+RQNg9VW\npXrHFjCcOJUFnqLKeMzITf5/EWpaIo9bvWIujbmS/N5qIYDmDVVorq+q2MnM\nxc/iMpMrnlI7k7SPJxZfWiWOOHllPhNoBrb6a+1Xw1p/G1l+MhFvsSCchChu\nUEjmMNqFtIyoIW7Yp5ZPLEXzocRg+vf32izix9n2+aHPxkLJkhiQbEkMAGX8\nlI3rbzNS36nTTPwV3LQZ2ovMSv3vCyeACNC9PZs1KvcWs4OG97KBDoILd+qe\nxGxH6bUlTZTppR0/WNTBXeyW/i+BapqDYzofJbcGemsARUDJM4YYpeBu5dJk\nr7Lc\r\n=ztL7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBXEHSQdSueROZXoUaISty2A5EW3v9MhfUwz3UHoO6ZlAiB4MGiBA1cn1Tc4JHdk5QBT5K7plpJtlPTIsa4ZlqjgKg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.b5e665a9.0_1631729643051_0.8657719278720362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-select","version":"0.24.0-canary.ab1e177c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/floating-label":"=13.0.0-canary.818f4ee93.0","@material/line-ripple":"=13.0.0-canary.818f4ee93.0","@material/list":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-floating-label":"0.24.0-canary.ab1e177c.0","@material/mwc-icon":"0.24.0-canary.ab1e177c.0","@material/mwc-line-ripple":"0.24.0-canary.ab1e177c.0","@material/mwc-list":"0.24.0-canary.ab1e177c.0","@material/mwc-menu":"0.24.0-canary.ab1e177c.0","@material/mwc-notched-outline":"0.24.0-canary.ab1e177c.0","@material/select":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VU+H3PU11kADaGmffCHFlNNw64BXYMOmQITA2OiQ89mZSDQ/diPs9Pq2fvavO+HzFqayKZYCXKphF1SclvpxmQ==","shasum":"725aaafc4665aaa3e03aa7c26978e2d97b7724e1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.ab1e177c.0.tgz","fileCount":13,"unpackedSize":211124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj9aCRA9TVsSAnZWagAADxoP/2BoS4gNrlIF2N8CG1kX\nwZ2sKu/G/uS+COWBdU1NpJDVjok3HTLDfYQuqr/po8fN8qa6Y5BZ6CRF6owb\nS7iIMXCd7i8Ec3zwrum59YOEIwIeUOxGy4q5Phaw5DyhzxUAxopfmi+6zqCn\n9zHuzIGJ8+y0wrZCnnoaEj5R19i5hy6FdzGW2PHyeQLst4Nw7I8jS5LMyHW6\nkmki4bdvumyRiBV+hKiDiT1iGbqCmXJbkiDcv1AEeoskD79QF8EyNtg2982Q\nf9dJzceI7EwfO9KD+RJlIdGFmmMNWet5uqROWV/bNDIgJZQY2mDfkP2QHS3v\nM//tzIdu7R6nG3q0FWjZBtbWA8B31V1+W3jt0DH9zXGwVKyGdYAJvsuP2tC6\n8UZB0iX4vIAg3Uj1Ho0guLaIjKQT/oP1UNpqinvVTS+oEBUfA7sOIM7U5krq\n1k/d1n/EMQbNbOPU80armwkMNmR6/nckCJlnUNTyu6f/8rPhbznX57UAJvj9\n7D0iomnMxI+O4x8v/2D2WcNZMGVAISkV3tqTIsK82SvGfuFt19uImChyO1f1\nBDlDwwoYJPHEAbOBfSXuL+C4WcniJwkqsJO11RlGOfHs8Ggx2QWn0HRhpjck\nrWINrHapNefw+IJnIPuHMnIrJEgP8oRInmsCvEb8ZBrq30zay4qIiCtZiKHH\n56R0\r\n=EeoJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/wjeuIKOVP8zHI4lihyeYZV6+S9gbrb4LccV0SutleAiBOzIuEIZzlyPhRUV0KwG4zUHFtALxFlJ6Zito1HwXHPw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.ab1e177c.0_1631731546588_0.9766219402764393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-select","version":"0.24.0-canary.8dff8894.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/floating-label":"=13.0.0-canary.818f4ee93.0","@material/line-ripple":"=13.0.0-canary.818f4ee93.0","@material/list":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-floating-label":"0.24.0-canary.8dff8894.0","@material/mwc-icon":"0.24.0-canary.8dff8894.0","@material/mwc-line-ripple":"0.24.0-canary.8dff8894.0","@material/mwc-list":"0.24.0-canary.8dff8894.0","@material/mwc-menu":"0.24.0-canary.8dff8894.0","@material/mwc-notched-outline":"0.24.0-canary.8dff8894.0","@material/select":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-30n3xrg79ChAAOEPa3LMvZih6f2AHG6M3TtzwvqEo+Xu7UCw8uC7gdHJdpEYwLVq+8OnGIvJFLx6cgEM0nwoCA==","shasum":"674256485a1dfce708cae02fc6abdacc67cdbbe1","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.8dff8894.0.tgz","fileCount":13,"unpackedSize":211124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTlCRA9TVsSAnZWagAAPNYP/3Fczupxc2aPdbQK8nup\np1BVOQnT7zhOdyzJlosTSx0xTSBuAm229OfCUPBchoipuDgSBFsExtcZoasF\n2Mw3gQdnxImh+9O3dh2NAwXsjYu9s90n/xT9jGvLEETdBjtjCyr5YXTrH+CM\nMz2GZgFXnPjLnrdappjceXxt/wwA8NvKM2xOin+06TGht9tuTN7PhfusiGMc\n/paBDmagz9vJ7mumZ6Pk8cFsJoAmBFwiqkFujp+gCCR/dfWZfXVjlO58+Q/B\nizaUniD+18pWuHmkJiDF0FuCeLwP5EgfZ68yDofJbZauCJj3mXzGiu0STdGT\n2zLX1eDd5lnMiRLafPBv/2YU/j5QxKzMXTmywMyTo27av7JlLAOmXY5zrjCv\n/Z0OxxjvgIHmWNWHF9oFr9glGYMZzKwkWNeQ0iSpqNZGdWK4Uo4vk71suRtb\nlpBErLkyVF5E0++BA5WVkkB997HqJnYxF2EAuNr4ppDie601oRnfzSEWr86j\nVpHxuqsU16RU42uuwPJ/Zpks8XY1QxxHDBG2KUrKayxnGIpXjNug4uUk32J3\nbgnmolh/WWszgaavFihbQE/3SMeQ6ck5QtO7AwuLtoiHi7+3e7/pfUcpZ/DR\nnT8/pjKtxNYCxIn/lDy++M5bOSI9TFdPLwmF/c6mP9mJHJYE45/hYElii/pO\nlgNT\r\n=gqF5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5F63TZCJqSGRfBYQuMp1xQggl6nt4+qveRV0ecRNx4gIgLopQ6dGHYD9facSyaQ5U3WMlXAsEQ5HUW5DARX2PbW8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.8dff8894.0_1631732965835_0.335781562316954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-select","version":"0.24.0-canary.9cd7e927.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/floating-label":"=13.0.0-canary.818f4ee93.0","@material/line-ripple":"=13.0.0-canary.818f4ee93.0","@material/list":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-floating-label":"0.24.0-canary.9cd7e927.0","@material/mwc-icon":"0.24.0-canary.9cd7e927.0","@material/mwc-line-ripple":"0.24.0-canary.9cd7e927.0","@material/mwc-list":"0.24.0-canary.9cd7e927.0","@material/mwc-menu":"0.24.0-canary.9cd7e927.0","@material/mwc-notched-outline":"0.24.0-canary.9cd7e927.0","@material/select":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RBDw9WiaECIeB/UU4O3vWXhJm4f0dT16TMcKHTXpl5cB4SwDcTGeTQIc/3K8Lr5dCQe90FOsVHYd56zcka3nYw==","shasum":"84257ce6e1bfb833ea6fac59d5cb8296c51e5a5f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.9cd7e927.0.tgz","fileCount":13,"unpackedSize":211124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQliBCRA9TVsSAnZWagAAEpMP/3Tv5tu96eVWKHOFm4Vn\nNp//NfqDo9N96hxhefboeK644bIO8Ab/ipgfghadhsxyXszjiMqABhvNJopl\nlyAJJAP9v3mEhjTw6jWYvFSuP4oqCCcOrfBJ4fIx4lMwtlNoGD/Ymy7hVY0L\nd5z5z24yTOwohsGGSv9zQm7fI6XqBi7HGGfWHrGclWXzoUYPTPGwFxVUXcvp\nZp77IpDIAyoUEOsDG4lXSOaa5l45i2MMbUdH0V6GvrgwYg/qaznynIX+LSw0\nyNIjtq4DXtnOuRhInjX6ebdY95ooA0DJlqDiZT6m78q4VrdKcFfYUXA4TX38\npnetDe5FpI9XIcNDqk32UY1M7+BkPq0tp7da8CITaDms6gTPoICesdfJIT+M\nItSdSrzVhdJRvt9JQ2KxCSIX3tuJD2iRM2cdZVBDDYNFiO3DO8x7k/ZNEwpv\n8K751pm3kK2eFgbdzgkqLO6VwJWRD04vibDr8SQcSQIca7Fb3cbximjNmmxI\n5bIewWzMJ9gG2C4JA/kdKvvARhZpgdVwp/k5eHKJTCPACCJ5JZOrqjMbzmhZ\nN55vQ6TObir2u/qQsaQiqhJyjAegR/VNTKAeWeouNP3g9ChlDRrZxGllXwv1\nkEyQKLYnmS1zYW4hi14Rmcd9xt05vfCZJCt1EkcgVkSVEqEeWAni4aL/GDFr\nXoNe\r\n=h6Rj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt5bv+4nt8C2bLA5UAtazVVWJNFCieGTY+FteW9ZVf2wIhAPCAMOQeBIDtY1FENydw9WKBXiGnUQlHY3NWkPiwyHnB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.9cd7e927.0_1631737985155_0.23371358006637188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-select","version":"0.24.0-canary.a7132082.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/floating-label":"=13.0.0-canary.818f4ee93.0","@material/line-ripple":"=13.0.0-canary.818f4ee93.0","@material/list":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-floating-label":"0.24.0-canary.a7132082.0","@material/mwc-icon":"0.24.0-canary.a7132082.0","@material/mwc-line-ripple":"0.24.0-canary.a7132082.0","@material/mwc-list":"0.24.0-canary.a7132082.0","@material/mwc-menu":"0.24.0-canary.a7132082.0","@material/mwc-notched-outline":"0.24.0-canary.a7132082.0","@material/select":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HZO2LUXDE01n6YMk61NFhQiNZH4QvGOYO7AtiSdCeXduPnAlBdUX9LHU0uxFIWWup9xbfbsm4GEmbneB+c+2RA==","shasum":"098448690bc84d710a7153ac65a86d2fd3d23f98","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.a7132082.0.tgz","fileCount":13,"unpackedSize":211124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmm7CRA9TVsSAnZWagAANlgQAIw5ajwItqg57T7pjmf6\nw95gfU8Wk25LB1994yh6n+U7tr//bRekQF1wvjCaEv8Bga0ihjxQL2fRv88u\nA5SoYzZz+w5OEEMGC6IsPi9wf/jKvb8KqUapsnGoFfnqpEny5Del0F7zfcXs\ne1/7Lgll8rCk5V0IjVtX/YNx0wdr7/qAorgU3e0cuSc6WwDtJaQrNjN1oJ6f\nyI/IzPfccU94ArXW9e+e+i3+RMycm0LTTaiF9tVrZo8CBfabBIYZ+8ZOKalx\nxanAfOcVgJC9KSwqi8FkcL0v4edUyCgr5gxlkB14NnKUap/X22m6oHykdFUI\nokClO3xP2xTqZUoVjtr/XTbtA4PvC6bqdWr+Gf1vYh5qVYoSFrqO1GgdOrmy\nmMXT/gx6WyDNntUEyFpVDDfPpdJxzHvQJRA0rioIMghNmaWYFutjsA0ZIxVD\nDuR8RIVOzxNR6zbFm++t7o55X6WWdw9ojldFuJezyYg2ITp06IrT7QJomw+2\nvd2+bo/buSVNxJimV0x6j4UM2yqOs+UgwYPIvPFFw3hyH94L3wzb6HV47YUm\nn5kLmpipNHPLRZD2H3Cv/KlVZAF44kSwO7i0Yz5355oAuJZ7jP+fHNyWVgky\nWx5bM7qWT2dlDV59vCjQGECUcBvXNCKtlM7in0sif1nvzZDPg3bSqxiT53AI\ntX4e\r\n=17QL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGXCTBd3jHRDcA2c8clBXx5W162aoGdHTeNZkn7bl3sZAiBl7/VILkfTDuJKIs+1i6Ka6q3NcpHpHBQbPYJ5n0gUgw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.a7132082.0_1631742395129_0.9495016122597515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-select","version":"0.24.0-canary.cd9110cd.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/floating-label":"=13.0.0-canary.d4e16a6c4.0","@material/line-ripple":"=13.0.0-canary.d4e16a6c4.0","@material/list":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-floating-label":"0.24.0-canary.cd9110cd.0","@material/mwc-icon":"0.24.0-canary.cd9110cd.0","@material/mwc-line-ripple":"0.24.0-canary.cd9110cd.0","@material/mwc-list":"0.24.0-canary.cd9110cd.0","@material/mwc-menu":"0.24.0-canary.cd9110cd.0","@material/mwc-notched-outline":"0.24.0-canary.cd9110cd.0","@material/select":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3Jql8GrStfepzpLzmhadBUHk0H3jNNv1yIFaOg6GwktMvTO4E3PrsHujkyqowSyr8FGSiki0t/7NqJSllgJKxg==","shasum":"3a405900078105ed18de01d698fe7d4ad5804ee2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.cd9110cd.0.tgz","fileCount":13,"unpackedSize":211124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LyCRA9TVsSAnZWagAAPhoQAJ8M+nNaPzlAn1z4DibS\ntYCMg9pN2ZDcdIpoqE2WWjtTuAkE+zDAAbkOU7mpZ+1vulcGPUrudWDkmaC/\ngsjMxRRzyHNSx0k5ejD8KcLC3t+sRu4xWqPH6oMDdTTor+LfXpORiwl/NnJw\nWS0OR5pJ5QKrEVEXMI7XAj06HpT63vMhHfVmgd0F6oqBu6mC3cWy7GOpbxWU\nT3qLy4UwYK73myyHyPxoJXYVbCk12DavcD7jrNqzfyoZdjuc1chOMCZwMnxa\nOY8NeydGttA+R3if4OWjoTJ34s5xlPyD2ov31Sf+al2REeuiTJ+YCpbkuB8K\nP897tqRt6mrEW2k6oVatsfnwD3ojyyVUlBfP3iOsDrrGOWiayBuM9pbmNzbu\n6JgNsfqSdBMWWzfAEftmTcy8Sg8ufCV2vOe3nJVLNKxot8b5k9PezUAMOLM3\nBKRsRSPvLe6PKCaWyyO6w7heVgyev2y5GMjnLXi0wSPx+FG9xAQJvTg+ldvi\nip5mn5f04NrVcTXO4+zEQ9qddagF9oY73jLw5PDD7MIuQCAeCxED2CJWJbn/\nS1hCYE1wc4spoVCyV8Dyn9YakBoHtifi3xNatU4hdizwFqtSFRmzzsImaUPG\n65qpJK7XMDz+IY/zO/BpaEo94Zj48inxdLu6oD+HL3a0NWpKIHumciGKgAAy\nvsjH\r\n=rcTz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNvjx/6hi+oPydz/Pe9mjp7Ovx1gmbk5Or/x62ojO0XwIgThfVzvmiOSPuXM0bjFIs071GwjlUleXqhtCGYRr7b9g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.cd9110cd.0_1631814386304_0.17256626578215206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-select","version":"0.24.0-canary.1e5a9883.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/floating-label":"=13.0.0-canary.d4e16a6c4.0","@material/line-ripple":"=13.0.0-canary.d4e16a6c4.0","@material/list":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-floating-label":"0.24.0-canary.1e5a9883.0","@material/mwc-icon":"0.24.0-canary.1e5a9883.0","@material/mwc-line-ripple":"0.24.0-canary.1e5a9883.0","@material/mwc-list":"0.24.0-canary.1e5a9883.0","@material/mwc-menu":"0.24.0-canary.1e5a9883.0","@material/mwc-notched-outline":"0.24.0-canary.1e5a9883.0","@material/select":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-v5zVbYGhTK39y+YNnnclRdtQb8zbAQvD8Ug8ite1eKKJdLKPjP/5E7AIIQHxZ12633Nn9grMTejDQh1H/2yyYg==","shasum":"3155d12acee6d1af0cd5cfeb53f4efec92de705b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.1e5a9883.0.tgz","fileCount":13,"unpackedSize":211124,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHG5KLIB9OLbxrOGDCePWPOd5qdRV1eCvjwYmZAM/fmpAiB+JlamY49RSo2nM5dzIThyV08Vdq2q+GHHU4pkg5Z05g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.1e5a9883.0_1631911180774_0.15698528746361795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-select","version":"0.24.0-canary.32c830ee.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-floating-label":"0.24.0-canary.32c830ee.0","@material/mwc-icon":"0.24.0-canary.32c830ee.0","@material/mwc-line-ripple":"0.24.0-canary.32c830ee.0","@material/mwc-list":"0.24.0-canary.32c830ee.0","@material/mwc-menu":"0.24.0-canary.32c830ee.0","@material/mwc-notched-outline":"0.24.0-canary.32c830ee.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-uVFKkLWCLh2nthMqDR3nzwzT4adX+BZcIWpGAXak2ZTyWlqotBAMwSh8iiI36tdm7g/Y7HQB30lNgDxaZdvQeA==","shasum":"ac03a393a3b3345758aa3491fdcd72f9893473b3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.32c830ee.0.tgz","fileCount":13,"unpackedSize":211124,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWCxi0Mm+001pJ+hDCAYKeASMELETrx5Fg4jFlJD7uBQIgFjMTdTM0YWM+cTT5WBtcsoUpByShdcTnKZqKD8ctu5I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.32c830ee.0_1631920159933_0.5616477088690004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-select","version":"0.24.0-canary.1de87bb7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-floating-label":"0.24.0-canary.1de87bb7.0","@material/mwc-icon":"0.24.0-canary.1de87bb7.0","@material/mwc-line-ripple":"0.24.0-canary.1de87bb7.0","@material/mwc-list":"0.24.0-canary.1de87bb7.0","@material/mwc-menu":"0.24.0-canary.1de87bb7.0","@material/mwc-notched-outline":"0.24.0-canary.1de87bb7.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-/0sdxJHRLXT4GBY6PQzyDiItJ1NmIFe4VMRwt/wjvuDHkJVVvmOu4AeYY8IoskUTNBf1jq9yq0t/nGZWPIpE/A==","shasum":"58723c5648929ed2226ea1166b12756f0a162374","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.1de87bb7.0.tgz","fileCount":13,"unpackedSize":211124,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFUR4eyOaM9C3vIVijbHfw+8kqYSjoapB620mouxHs8NAiEA/SH7t4uxl4OsN8S4vkvFH35etISu/2QkFYbZAwsd/1Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.1de87bb7.0_1631991162193_0.26613986216167373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-select","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-floating-label":"0.24.0-canary.f2ea80c4.0","@material/mwc-icon":"0.24.0-canary.f2ea80c4.0","@material/mwc-line-ripple":"0.24.0-canary.f2ea80c4.0","@material/mwc-list":"0.24.0-canary.f2ea80c4.0","@material/mwc-menu":"0.24.0-canary.f2ea80c4.0","@material/mwc-notched-outline":"0.24.0-canary.f2ea80c4.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-CtKoi9VaBGakeN9SC0LwSPMCds6o1pI8pdfZn0VS2Tdv9boYZ86am3tKtJwPuFcB/h1g2sKEWhBiigePcXAFRw==","shasum":"587498cfd0fdfed0a51d6b316b3507c3c5f9deee","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.f2ea80c4.0.tgz","fileCount":13,"unpackedSize":211124,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCj5CjrecmVLEM7jFEWg+fE1wl+qhMjcx+yoDPIGddo/wIhAMUlle5eQNreCrRj5Lz1vwWP6Y8VB0WUo1hiNwPrlHjS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.f2ea80c4.0_1632160528066_0.7796650483759231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-select","version":"0.24.0-canary.569d739f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-floating-label":"0.24.0-canary.569d739f.0","@material/mwc-icon":"0.24.0-canary.569d739f.0","@material/mwc-line-ripple":"0.24.0-canary.569d739f.0","@material/mwc-list":"0.24.0-canary.569d739f.0","@material/mwc-menu":"0.24.0-canary.569d739f.0","@material/mwc-notched-outline":"0.24.0-canary.569d739f.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-T6n+ux+5g05L3to4DdZaOhAGq+uCkmjt3GvYcHpELHTSI+56tTBpv3arKWbXi2X8F/NZ3Pa9GkFypbqS/jNqMQ==","shasum":"28d93b9bd7ea08beac71c85b773cde54b2f26be9","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.569d739f.0.tgz","fileCount":13,"unpackedSize":211124,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDjQ2T1TagAGGVtcwR2hvSbwGRkKYgQFVcFxR+i0hQDRAiAogqFBo7JhWc3mu8kH59CwyLNg12lS0VS1s/UyIcpivA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.569d739f.0_1632173068211_0.8063011357867531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-select","version":"0.24.0-canary.5a434a50.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-floating-label":"0.24.0-canary.5a434a50.0","@material/mwc-icon":"0.24.0-canary.5a434a50.0","@material/mwc-line-ripple":"0.24.0-canary.5a434a50.0","@material/mwc-list":"0.24.0-canary.5a434a50.0","@material/mwc-menu":"0.24.0-canary.5a434a50.0","@material/mwc-notched-outline":"0.24.0-canary.5a434a50.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-d3dS50DoNzFnixZNidzvnJD96mqnsmCB+c0vn0v16fe1pTUHN09DrH4FjcmL12RW02XFKRYX8rZHO3zzhhES5w==","shasum":"20c3bf9d2ea3517d877e2554b0aaa8f4d965c0d8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.24.0-canary.5a434a50.0.tgz","fileCount":13,"unpackedSize":211116,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICS6iq05ZipXCQ9GFCisUuSmtroup2kJ8BBN+LP7GhvdAiBn2+FX8iR626Zh/TnyXiKBXRHhOSler/UChdHwmE5+zA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.24.0-canary.5a434a50.0_1632189687542_0.3283712391980449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-select","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-floating-label":"0.26.0-canary.b1c1ab52.0","@material/mwc-icon":"0.26.0-canary.b1c1ab52.0","@material/mwc-line-ripple":"0.26.0-canary.b1c1ab52.0","@material/mwc-list":"0.26.0-canary.b1c1ab52.0","@material/mwc-menu":"0.26.0-canary.b1c1ab52.0","@material/mwc-notched-outline":"0.26.0-canary.b1c1ab52.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-zI2zYh0k0Q0c1zUSGTA3C8aDty2xpNKLZEqCjQW5w3xS8NFlIRepNH/S+BTEbvip52UVcvLdHWr9Oh3yzwEgjg==","shasum":"5c70e52bd16e4e054f110cb37312272864c24f05","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.b1c1ab52.0.tgz","fileCount":13,"unpackedSize":211116,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAfRvrEHARy4iA0QJe7F5EBxTxc8VSRVRVJsBwhA+JcwIgMQza+B8LMDITeSqSStBjTvltirHiEfg3hxuPzIz68QY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.b1c1ab52.0_1632193967292_0.7858658628199615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-select","version":"0.25.1","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.1","@material/mwc-floating-label":"^0.25.1","@material/mwc-icon":"^0.25.1","@material/mwc-line-ripple":"^0.25.1","@material/mwc-list":"^0.25.1","@material/mwc-menu":"^0.25.1","@material/mwc-notched-outline":"^0.25.1","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-2gp4K2waKAvFJ0Mc99DbrKhAOwFmLprguSX7tWGG5MQtf6eP/0gAFOl6tA7rQx42gzjS/CtfvhebeXguiKpYaQ==","shasum":"414f0b75c8d97dbece6fcc60f1fcd977ab8c8372","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.25.1.tgz","fileCount":16,"unpackedSize":295438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxSE8PsQicAc+6ef5zra54FHCJjaWLQQ0S2oClg5Ej8wIgVwz9qdwIKOJFm79yy2tnSnig/kkje4Xa2Ht3CZcspgA="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.25.1_1632193979111_0.35991142601172044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-select","version":"0.26.0-canary.ae060177.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-floating-label":"0.26.0-canary.ae060177.0","@material/mwc-icon":"0.26.0-canary.ae060177.0","@material/mwc-line-ripple":"0.26.0-canary.ae060177.0","@material/mwc-list":"0.26.0-canary.ae060177.0","@material/mwc-menu":"0.26.0-canary.ae060177.0","@material/mwc-notched-outline":"0.26.0-canary.ae060177.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-jKfppSqLIu04j/8Ek7PguyNkGDIHbW6NbuUvQyGUqbS3cFlcDLON0udEePfC+NCBgXVaCTl5cIAzOlUdu1b04g==","shasum":"b3f3546080f0611b0c7d51a29875fd7c408997a2","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.ae060177.0.tgz","fileCount":13,"unpackedSize":211116,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9EE70cFgxGM46TMO/C4brIqOrdKT7E9DeQOvLAUL6AAiAmCIWOQQDaEkZcdSmXGjHVLRjpW1Vrb/uGLUp1Sch+/w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.ae060177.0_1632235122682_0.5075897779507847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-select","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-floating-label":"0.26.0-canary.b6fe2a12.0","@material/mwc-icon":"0.26.0-canary.b6fe2a12.0","@material/mwc-line-ripple":"0.26.0-canary.b6fe2a12.0","@material/mwc-list":"0.26.0-canary.b6fe2a12.0","@material/mwc-menu":"0.26.0-canary.b6fe2a12.0","@material/mwc-notched-outline":"0.26.0-canary.b6fe2a12.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-WR71BfZRpzYjegcbJN8T4exQ34mwgdLav2Ux4tprhfME6IXob9pEelyFyk9fydZhKZ75PbM35t2uMj5KDzfM7w==","shasum":"88a1f05f7fb5d356ef9d11629d3a70a5fbac410f","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.b6fe2a12.0.tgz","fileCount":13,"unpackedSize":211116,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5gmmTupTC1jfFmYdxALbTnP2wPh1eDc0avK2/Aqpi1AiEAwX4NERK09Q8od8yAMvjlgeKYnsXggi2yTQAgymTGwOg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.b6fe2a12.0_1632341811648_0.8875496930477984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-select","version":"0.26.0-canary.07e91417.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-floating-label":"0.26.0-canary.07e91417.0","@material/mwc-icon":"0.26.0-canary.07e91417.0","@material/mwc-line-ripple":"0.26.0-canary.07e91417.0","@material/mwc-list":"0.26.0-canary.07e91417.0","@material/mwc-menu":"0.26.0-canary.07e91417.0","@material/mwc-notched-outline":"0.26.0-canary.07e91417.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-GjYmhaAULT1nOlF4BS57z+wQCH771QK53c5gmakdmQWNk1o/sQemIGIpzu3LdKMoS0YwkFwx0IKaZ1oZVMHY+A==","shasum":"147c18a58106227bac7bb0e1fd05d8ff657530fb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.07e91417.0.tgz","fileCount":13,"unpackedSize":211116,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmreQrKFlQ2qy9AG+fADd3Fsb9q4/DB55wx3xaWvHFMAiB0MZqVGPS6U8ZgTvdDz8ZVo/TJ524VHwfcOViO/+6vhw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.07e91417.0_1632344783702_0.4782655808504799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-select","version":"0.26.0-canary.e2203ffa.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/floating-label":"=13.0.0-canary.65125b3a6.0","@material/line-ripple":"=13.0.0-canary.65125b3a6.0","@material/list":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-floating-label":"0.26.0-canary.e2203ffa.0","@material/mwc-icon":"0.26.0-canary.e2203ffa.0","@material/mwc-line-ripple":"0.26.0-canary.e2203ffa.0","@material/mwc-list":"0.26.0-canary.e2203ffa.0","@material/mwc-menu":"0.26.0-canary.e2203ffa.0","@material/mwc-notched-outline":"0.26.0-canary.e2203ffa.0","@material/select":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-S7OQE89qL6CyCxP6aA/ZzK/q44QriflGyr+vU0Lp442vkKLwmfWGHKxsq7hFG9s4K3e5QwEsi5plSTlmOyOXHA==","shasum":"63bc763f6758ae308f3c6972b11b1fd45590ca6b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.e2203ffa.0.tgz","fileCount":13,"unpackedSize":211116,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwaSBlkKjZWh1Hp701dyuGowVWNNxeboSkQknp5CpFmAiBisD5MU/FZwZr2bPRhs6RmkQzNzNlQZQvzCl/boWUEiQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.e2203ffa.0_1632421693901_0.7425938974693844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-select","version":"0.26.0-canary.4abe237e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/floating-label":"=13.0.0-canary.c79aa0cdd.0","@material/line-ripple":"=13.0.0-canary.c79aa0cdd.0","@material/list":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-floating-label":"0.26.0-canary.4abe237e.0","@material/mwc-icon":"0.26.0-canary.4abe237e.0","@material/mwc-line-ripple":"0.26.0-canary.4abe237e.0","@material/mwc-list":"0.26.0-canary.4abe237e.0","@material/mwc-menu":"0.26.0-canary.4abe237e.0","@material/mwc-notched-outline":"0.26.0-canary.4abe237e.0","@material/select":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-/4dA7nDrl4dUC4bdD7XStUUjDo/+Fgo00jfti+tU2fiw2orKnw3GlAzFJhtzWTpXXDZXN8/sLCiRU2YVlG2x6w==","shasum":"a4d5187754454efda81f00937371dc5a82fce2f3","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.4abe237e.0.tgz","fileCount":13,"unpackedSize":211116,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9QovkM9w3i9ceEpd9YhYjKIoWutWMToZtaFZfGDryrAiEApeElhBABAWNffRBVprfLJW+VhyYHri1ODIZAVMtZu8c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.4abe237e.0_1632504703019_0.9695238881029931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-select","version":"0.26.0-canary.6278ee5d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/floating-label":"=13.0.0-canary.c79aa0cdd.0","@material/line-ripple":"=13.0.0-canary.c79aa0cdd.0","@material/list":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-floating-label":"0.26.0-canary.6278ee5d.0","@material/mwc-icon":"0.26.0-canary.6278ee5d.0","@material/mwc-line-ripple":"0.26.0-canary.6278ee5d.0","@material/mwc-list":"0.26.0-canary.6278ee5d.0","@material/mwc-menu":"0.26.0-canary.6278ee5d.0","@material/mwc-notched-outline":"0.26.0-canary.6278ee5d.0","@material/select":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-FNQ/hsUKh3A4EO883sbQG2n0gkoZlfntE0Y/sY83R8ZAC/SgatYc730lbuJl422i7yJgZ6Wz6SfhV+YkF1uCDg==","shasum":"14a7df02d168574f248b2d02a4aa3895454aa3fd","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.6278ee5d.0.tgz","fileCount":13,"unpackedSize":211069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0dwqYrobbDVP648oUbsoGHBmB/oAVN6jaxFMoBzNNBQIhANtDWAo1NVWf4cOQ8IJT9SLJ0yC9rB0ybc+cFqK7ho/5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.6278ee5d.0_1632767517434_0.7346804027559171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-select","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/floating-label":"=13.0.0-canary.c79aa0cdd.0","@material/line-ripple":"=13.0.0-canary.c79aa0cdd.0","@material/list":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-floating-label":"0.26.0-canary.3a5d5f34.0","@material/mwc-icon":"0.26.0-canary.3a5d5f34.0","@material/mwc-line-ripple":"0.26.0-canary.3a5d5f34.0","@material/mwc-list":"0.26.0-canary.3a5d5f34.0","@material/mwc-menu":"0.26.0-canary.3a5d5f34.0","@material/mwc-notched-outline":"0.26.0-canary.3a5d5f34.0","@material/select":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-n7K8FiFdlUlraH6JEHnStc4jmiMUIMYPCw4iWifH2OgvZFCoC1yXP7E3ffAgSxI7R9J8pH/kFvz3Ps85raq4OQ==","shasum":"8733005fd977b118700531fc998951630259a0ef","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.3a5d5f34.0.tgz","fileCount":13,"unpackedSize":211069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOM0HbuHfSWT2Wo089qqoPXqqZt7m7hY9RYhRlqDiX0AIgOtusMsLXzSEa418ewyQYTowcyOSh/NGaAOKcnfpNVUw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.3a5d5f34.0_1632782525337_0.14004161537904092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-select","version":"0.26.0-canary.143ed3c8.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.86b50ef74.0","@material/floating-label":"=14.0.0-canary.86b50ef74.0","@material/line-ripple":"=14.0.0-canary.86b50ef74.0","@material/list":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-floating-label":"0.26.0-canary.143ed3c8.0","@material/mwc-icon":"0.26.0-canary.143ed3c8.0","@material/mwc-line-ripple":"0.26.0-canary.143ed3c8.0","@material/mwc-list":"0.26.0-canary.143ed3c8.0","@material/mwc-menu":"0.26.0-canary.143ed3c8.0","@material/mwc-notched-outline":"0.26.0-canary.143ed3c8.0","@material/select":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ujjcjhoYwYahyMl5Dhgl5q7hwdW5qmxJdLTRA+ttoBZe8AHEX7zDUusNHMm9RAIwZP+BxTRPrQEQrUcnLXCT9w==","shasum":"d0cb48908009668cffd02c1c12a4488ae4a63dfb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.143ed3c8.0.tgz","fileCount":13,"unpackedSize":211069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJCPaf2ntj6tbGA+lx6BOXwOXigo21RKmuMfYSZ9j3VQIgGsfUZJJ/YK/hGXig1Sn1mJNyQV/HaVEscEgKEplUxxA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.143ed3c8.0_1632880285907_0.9608742166825714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-select","version":"0.26.0-canary.e5923d68.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.86b50ef74.0","@material/floating-label":"=14.0.0-canary.86b50ef74.0","@material/line-ripple":"=14.0.0-canary.86b50ef74.0","@material/list":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-floating-label":"0.26.0-canary.e5923d68.0","@material/mwc-icon":"0.26.0-canary.e5923d68.0","@material/mwc-line-ripple":"0.26.0-canary.e5923d68.0","@material/mwc-list":"0.26.0-canary.e5923d68.0","@material/mwc-menu":"0.26.0-canary.e5923d68.0","@material/mwc-notched-outline":"0.26.0-canary.e5923d68.0","@material/select":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ralFByv1J06k7KYdpCf92edl9Dz0fD0AnWpVGJhjVBPBr61CUhNPQp1EwfdMR54UBxmnJ9SAkIOByK7UHTCGHg==","shasum":"66f774af473eacd0c49983fe5bff3829917d60db","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.e5923d68.0.tgz","fileCount":13,"unpackedSize":211069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzHOEus2L1n02h5Sc8yZqfhJYSrap+ZiBdSz9Rbtp5dAIgLUVX06VfaQXPGlJ/F1n8x1g4ID4bIVNmOn6ZCN9opDI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.e5923d68.0_1632960387151_0.4779698106985899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-select","version":"0.26.0-canary.d8ed5109.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/floating-label":"=14.0.0-canary.586e740dd.0","@material/line-ripple":"=14.0.0-canary.586e740dd.0","@material/list":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-floating-label":"0.26.0-canary.d8ed5109.0","@material/mwc-icon":"0.26.0-canary.d8ed5109.0","@material/mwc-line-ripple":"0.26.0-canary.d8ed5109.0","@material/mwc-list":"0.26.0-canary.d8ed5109.0","@material/mwc-menu":"0.26.0-canary.d8ed5109.0","@material/mwc-notched-outline":"0.26.0-canary.d8ed5109.0","@material/select":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-53R8MnDK4rIlqk631majVa5IZ4UYN7eO8abnlHWRsDO6JXNiBOynMl9fccMHhnePxqp4f8nf69JZFbqsAmWxsA==","shasum":"cc1c2e651d54e500a05ca0ecf3cb773745053c38","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.d8ed5109.0.tgz","fileCount":13,"unpackedSize":211069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd1QAjt5fx3Ga9kyRjragZrZaAc5nxgOzSe2KeUghO+gIgf41Q1ofz2APGX/CZczBU9u6VjKVsmo83cztjXmRitGs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.d8ed5109.0_1633044868055_0.9890251866444417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-select","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/floating-label":"=14.0.0-canary.586e740dd.0","@material/line-ripple":"=14.0.0-canary.586e740dd.0","@material/list":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-floating-label":"0.26.0-canary.0efb9c2c.0","@material/mwc-icon":"0.26.0-canary.0efb9c2c.0","@material/mwc-line-ripple":"0.26.0-canary.0efb9c2c.0","@material/mwc-list":"0.26.0-canary.0efb9c2c.0","@material/mwc-menu":"0.26.0-canary.0efb9c2c.0","@material/mwc-notched-outline":"0.26.0-canary.0efb9c2c.0","@material/select":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-DFYVms95r0jeslft5SQshsRNXiwR+EqGwU8lWJ2d0hu6KWcOJSdkWoyTK6pH4FLXPB2SGjqZnc22smBTJic72A==","shasum":"4f70b82d3eff80bded4d8eec765f40cd39c06746","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.0efb9c2c.0.tgz","fileCount":13,"unpackedSize":211069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/75iclwDm0cutfCAbEuc7/aPHOrMvxmckt9p4gp/y/AIhAPOuwD4rYJZjy467pfX1VDjp0coX5wOPlyElS4StHenG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.0efb9c2c.0_1633140531579_0.7523641992579246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-select","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/floating-label":"=14.0.0-canary.586e740dd.0","@material/line-ripple":"=14.0.0-canary.586e740dd.0","@material/list":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-floating-label":"0.26.0-canary.1c9adcb3.0","@material/mwc-icon":"0.26.0-canary.1c9adcb3.0","@material/mwc-line-ripple":"0.26.0-canary.1c9adcb3.0","@material/mwc-list":"0.26.0-canary.1c9adcb3.0","@material/mwc-menu":"0.26.0-canary.1c9adcb3.0","@material/mwc-notched-outline":"0.26.0-canary.1c9adcb3.0","@material/select":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-MlS/MlmInY4ZWbxSTAwHe9f87pn8N7S84s+XkXHj5Grh9FavoPukPM8vKPNLEbVQ4P9OtoZZvb4lDXb3HV0c0w==","shasum":"911c3a3c136285b2390c407869d7c2349c86bd42","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.1c9adcb3.0.tgz","fileCount":13,"unpackedSize":211069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/2qWePctGDeg4RSk+m84aNWH5+25nIvFQMz8LU1bWgAiA/kfkIy4c754OzYM5fmvi5/q5JyoHVQMINewaCya6CxA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.1c9adcb3.0_1633368850638_0.11528817151562953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-select","version":"0.26.0-canary.dfc00d60.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/floating-label":"=14.0.0-canary.353ca7e9f.0","@material/line-ripple":"=14.0.0-canary.353ca7e9f.0","@material/list":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-floating-label":"0.26.0-canary.dfc00d60.0","@material/mwc-icon":"0.26.0-canary.dfc00d60.0","@material/mwc-line-ripple":"0.26.0-canary.dfc00d60.0","@material/mwc-list":"0.26.0-canary.dfc00d60.0","@material/mwc-menu":"0.26.0-canary.dfc00d60.0","@material/mwc-notched-outline":"0.26.0-canary.dfc00d60.0","@material/select":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-OLb1Al3HYbED+tBnkTmUMIF3mc9FfpeDdsQAdX00ZQkys+TNFSyeGNhtfGU3McuRh+kOWDJUa/BHE8KcioRvYA==","shasum":"ae421eb51003b4267841b8f9915ef3447ddd9068","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.dfc00d60.0.tgz","fileCount":13,"unpackedSize":211069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeWzgu+aOnr4Y9hlZQG6GNQqZP/jue8iHtvqaB1Ca8bAIhAOVhNVeExwQtZnK723FGu3MA45OKsMLFt09DKmCx16Qg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.dfc00d60.0_1633741073303_0.4614188032484903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-select","version":"0.26.0-canary.c3aa844c.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/floating-label":"=14.0.0-canary.353ca7e9f.0","@material/line-ripple":"=14.0.0-canary.353ca7e9f.0","@material/list":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-floating-label":"0.26.0-canary.c3aa844c.0","@material/mwc-icon":"0.26.0-canary.c3aa844c.0","@material/mwc-line-ripple":"0.26.0-canary.c3aa844c.0","@material/mwc-list":"0.26.0-canary.c3aa844c.0","@material/mwc-menu":"0.26.0-canary.c3aa844c.0","@material/mwc-notched-outline":"0.26.0-canary.c3aa844c.0","@material/select":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-IJfDdYBZVWeRnYOFFJkJvpWUx6txA7eFNfyZlzx8WLrQjTtgEx5mpjthWQ/ZIIOZuQo+R7cSh8NZlKJ15+TwiQ==","shasum":"59a0c837131689a295ee150fc40fd69532402e18","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.c3aa844c.0.tgz","fileCount":13,"unpackedSize":211069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6c/5EeufSkNDH1sT8MlgiPXbTrXNi6MSmi41sEctFXAiEA/0i8gweCgW6l1q5PE6/K8xgoIqBr+mCFIJUNIAhKiKQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.c3aa844c.0_1633994094798_0.10458772169387331"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-select","version":"0.25.2","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/floating-label":"=14.0.0-canary.353ca7e9f.0","@material/line-ripple":"=14.0.0-canary.353ca7e9f.0","@material/list":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"^0.25.2","@material/mwc-floating-label":"^0.25.2","@material/mwc-icon":"^0.25.2","@material/mwc-line-ripple":"^0.25.2","@material/mwc-list":"^0.25.2","@material/mwc-menu":"^0.25.2","@material/mwc-notched-outline":"^0.25.2","@material/select":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-SAr2mwnZYjZ9aZ+OAEmgiFbbHB48ElLsxrBIgjB+29LwgARap4jgQAlh9W26MuLuE95gHQgITH15SAMKrqbDlg==","shasum":"db7b5efd0373be151909900f1d236652492e8264","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.25.2.tgz","fileCount":13,"unpackedSize":210932,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5qPleqD+SEuUuLmnL88gNcgqu71ueeZ9OFjn0XK2v9AiEArZfVVW6VjJO2Tn0IYX8Qf7L+LbMJl3xEOMbB9Jrblds="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.25.2_1633994329228_0.0810956043019313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-select","version":"0.26.0-canary.406d6fe1.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/floating-label":"=14.0.0-canary.353ca7e9f.0","@material/line-ripple":"=14.0.0-canary.353ca7e9f.0","@material/list":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-floating-label":"0.26.0-canary.406d6fe1.0","@material/mwc-icon":"0.26.0-canary.406d6fe1.0","@material/mwc-line-ripple":"0.26.0-canary.406d6fe1.0","@material/mwc-list":"0.26.0-canary.406d6fe1.0","@material/mwc-menu":"0.26.0-canary.406d6fe1.0","@material/mwc-notched-outline":"0.26.0-canary.406d6fe1.0","@material/select":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-sTCDUsrMIrqwn5BCy35iakJuTeCivWheuaIJOJrc5/V0JiIsQWA7WndCS3SUyz3uYfEbmopWXgD4rP6wR7OO8Q==","shasum":"20933a8d441db89689a60be1d74c4538958dcf7a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.406d6fe1.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2bINwWCN3i4sOu9ZZLwVN6A3WK1OPb5WcAOGHcKKJ+AiABZ3lECHJJffCblj/YazzHlaFdjh5NiEcJyPAvzBwKOA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.406d6fe1.0_1634158801745_0.16878206464491874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-select","version":"0.26.0-canary.ca0a674f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/floating-label":"=14.0.0-canary.353ca7e9f.0","@material/line-ripple":"=14.0.0-canary.353ca7e9f.0","@material/list":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-floating-label":"0.26.0-canary.ca0a674f.0","@material/mwc-icon":"0.26.0-canary.ca0a674f.0","@material/mwc-line-ripple":"0.26.0-canary.ca0a674f.0","@material/mwc-list":"0.26.0-canary.ca0a674f.0","@material/mwc-menu":"0.26.0-canary.ca0a674f.0","@material/mwc-notched-outline":"0.26.0-canary.ca0a674f.0","@material/select":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Hdc9/VW0V6Lg4LJYc9a8vx2eUU67kTfbmq11wWMDbGHDgBiY2rslUJHfV+NcEV+RDlrky4ik/TOnLX3PuygUzQ==","shasum":"6a478da34cc8341571107fce6c4063fe35356aac","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.ca0a674f.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCqPlmfnd6fO8jThIsAQ5j2d3yNRAFB8QEb/sRD/IniQIhAJBchC8gcUX6iWZQZxlXRKO6AoDKKg+xYH3iuyISTNwf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.ca0a674f.0_1634593052814_0.5623100734372348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-select","version":"0.26.0-canary.eefcf660.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/floating-label":"=14.0.0-canary.261f2db59.0","@material/line-ripple":"=14.0.0-canary.261f2db59.0","@material/list":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-floating-label":"0.26.0-canary.eefcf660.0","@material/mwc-icon":"0.26.0-canary.eefcf660.0","@material/mwc-line-ripple":"0.26.0-canary.eefcf660.0","@material/mwc-list":"0.26.0-canary.eefcf660.0","@material/mwc-menu":"0.26.0-canary.eefcf660.0","@material/mwc-notched-outline":"0.26.0-canary.eefcf660.0","@material/select":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-lO8m3QsqOyK1aV+N8fU+mSJVX5F/2+kcY6WRKNILVotoYnKu3/ljuIMTUhe+wgltjQNRlpQTpep/3zY5IuT7nQ==","shasum":"4d653eb8e1b56584d689f7c221b2bc8c62d842de","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.eefcf660.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvPIOJ/guUaK9oWv2pWgo49e54oHnoQDCQdwCBVeNFzAiEAvyMI8RII9VNYh9R0XoSt0bBjgVT+lDVZQJZtUZfogYY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.eefcf660.0_1634765051468_0.7518258446520334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-select","version":"0.26.0-canary.d21acc8f.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/floating-label":"=14.0.0-canary.261f2db59.0","@material/line-ripple":"=14.0.0-canary.261f2db59.0","@material/list":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-floating-label":"0.26.0-canary.d21acc8f.0","@material/mwc-icon":"0.26.0-canary.d21acc8f.0","@material/mwc-line-ripple":"0.26.0-canary.d21acc8f.0","@material/mwc-list":"0.26.0-canary.d21acc8f.0","@material/mwc-menu":"0.26.0-canary.d21acc8f.0","@material/mwc-notched-outline":"0.26.0-canary.d21acc8f.0","@material/select":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-zF4cEz/4f1QrzZuV8wkkgEnhI9fV17Th1DAeZcyr+Tww+RdEyjG7pVYScwfvA4RxzusCmt9JqOK7Cv7Bkj1H4w==","shasum":"a89c4d7b6494547d36a05a4c38088c39836662d4","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.d21acc8f.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5nr2goA3hpk+73o/V5gPfeyUmiFCv2nX8lCgYXosqaAiEApS+IGhqKjSwbb811Hxe+7+g/WpnocMJf9xpWZwkwdw0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.d21acc8f.0_1634769184137_0.6922194337472893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-select","version":"0.25.3","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/floating-label":"=14.0.0-canary.261f2db59.0","@material/line-ripple":"=14.0.0-canary.261f2db59.0","@material/list":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"^0.25.3","@material/mwc-floating-label":"^0.25.3","@material/mwc-icon":"^0.25.3","@material/mwc-line-ripple":"^0.25.3","@material/mwc-list":"^0.25.3","@material/mwc-menu":"^0.25.3","@material/mwc-notched-outline":"^0.25.3","@material/select":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-mf1WrsNAW4rDHeVH+AgTPfNHAg70dJdwuIfIBqksAty3pYxnXQ9RjpL4Z/7kLdsGiS44du65vVgmZ63T0ifugQ==","shasum":"6683316b9ef3963a43539318a37471a100979c41","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.25.3.tgz","fileCount":13,"unpackedSize":210908,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn8CLGGFALFie2bcKzay+sQPejcsH8/8BDRoq28VEshAIgFqsiM/PqgL8LcJItzvggSljMnVIXvAeY7eZ5TDMod+4="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.25.3_1634838960418_0.07392638755835468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-select","version":"0.26.0-canary.60449b7b.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/floating-label":"=14.0.0-canary.9803d2dc1.0","@material/line-ripple":"=14.0.0-canary.9803d2dc1.0","@material/list":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-floating-label":"0.26.0-canary.60449b7b.0","@material/mwc-icon":"0.26.0-canary.60449b7b.0","@material/mwc-line-ripple":"0.26.0-canary.60449b7b.0","@material/mwc-list":"0.26.0-canary.60449b7b.0","@material/mwc-menu":"0.26.0-canary.60449b7b.0","@material/mwc-notched-outline":"0.26.0-canary.60449b7b.0","@material/select":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ZSw4jW6E9+PguFR9Gl7cvFHw+8qG856loW1BsEPn70P2SkQ+1fjJjqMe76oL5ZHsZj+k3hpKa0SJpEmobqOVrA==","shasum":"651935ea23d341e009071fda26f4e721f9843f66","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.60449b7b.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSIAiPAWAYUOIO9qr0sXIhPndDYVQt/uwhh2S+sDVhoQIhAK2U0/JEzf7CslqH/y+0l/K4R9sJXtCGPtZqiUDyffsG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.60449b7b.0_1634840285568_0.23488451137223754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-select","version":"0.26.0-canary.0d8084ed.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/floating-label":"=14.0.0-canary.9803d2dc1.0","@material/line-ripple":"=14.0.0-canary.9803d2dc1.0","@material/list":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-floating-label":"0.26.0-canary.0d8084ed.0","@material/mwc-icon":"0.26.0-canary.0d8084ed.0","@material/mwc-line-ripple":"0.26.0-canary.0d8084ed.0","@material/mwc-list":"0.26.0-canary.0d8084ed.0","@material/mwc-menu":"0.26.0-canary.0d8084ed.0","@material/mwc-notched-outline":"0.26.0-canary.0d8084ed.0","@material/select":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-bk6O/ThkoF/J3zEr497Jh8fEOw8SrLSIl7tKGjl05idbQjezO1HQW9qcK5ajKcV/TnNselUktmzrnS/ZYUUQ+Q==","shasum":"7e34ffb6616b864e8594c70cc48cb385f42c8193","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.0d8084ed.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpEpNN5xg1NkiGUoOnaCdQ+gx6xNOUgM4yM/4RyKEFYAiBF+7PohJFvc92vm9PFAkKo9TFz1AktLtE+oBeQJyUnUg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.0d8084ed.0_1635443130803_0.9487428730297087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-select","version":"0.26.0-canary.232327ee.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/floating-label":"=14.0.0-canary.a986df922.0","@material/line-ripple":"=14.0.0-canary.a986df922.0","@material/list":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-floating-label":"0.26.0-canary.232327ee.0","@material/mwc-icon":"0.26.0-canary.232327ee.0","@material/mwc-line-ripple":"0.26.0-canary.232327ee.0","@material/mwc-list":"0.26.0-canary.232327ee.0","@material/mwc-menu":"0.26.0-canary.232327ee.0","@material/mwc-notched-outline":"0.26.0-canary.232327ee.0","@material/select":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-LXI26DSiz18FnDI1fOqBssSn8wnOaS81uIDCG76Uhdoac+SxqvByraNi5iyFJPovPDiKGkrTKbAU7HfvGd+9OQ==","shasum":"723b69701841f376b3b79b43fca37789efb97122","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.232327ee.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgoHD8lmtfaCcFx8c3v+15yWaBEDl5k+M0wL78JtVuUAiA+me8aqYqkkwKhgTadQNAZHNl8eB/SN8Ghp5jm4Zx01Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.232327ee.0_1635797782426_0.4867853620337559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-select","version":"0.26.0-canary.0a492ae8.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/floating-label":"=14.0.0-canary.a986df922.0","@material/line-ripple":"=14.0.0-canary.a986df922.0","@material/list":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-floating-label":"0.26.0-canary.0a492ae8.0","@material/mwc-icon":"0.26.0-canary.0a492ae8.0","@material/mwc-line-ripple":"0.26.0-canary.0a492ae8.0","@material/mwc-list":"0.26.0-canary.0a492ae8.0","@material/mwc-menu":"0.26.0-canary.0a492ae8.0","@material/mwc-notched-outline":"0.26.0-canary.0a492ae8.0","@material/select":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-iwAC/t7qBhBfaGnsOR8x215GqEgJPy40r2AfOFShDe5a6GhYXgEitZFSa5cCqaK5YjzG7W6tMUP/VdTY4U35rw==","shasum":"d445e3d6b96ddec68f0351af7682d3c80e335b07","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.0a492ae8.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFE0NVnBYKDOW8+ABSdtqJ/kD+NSBx43cYnfR/GjwrXtAiEAp6ofXtgpO5FiRIp3bAFOsQ/FtWjxh6jwUpxqZH6bBw8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.0a492ae8.0_1635847280094_0.2725794328497235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-select","version":"0.26.0-canary.0aa18745.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/floating-label":"=14.0.0-canary.a986df922.0","@material/line-ripple":"=14.0.0-canary.a986df922.0","@material/list":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-floating-label":"0.26.0-canary.0aa18745.0","@material/mwc-icon":"0.26.0-canary.0aa18745.0","@material/mwc-line-ripple":"0.26.0-canary.0aa18745.0","@material/mwc-list":"0.26.0-canary.0aa18745.0","@material/mwc-menu":"0.26.0-canary.0aa18745.0","@material/mwc-notched-outline":"0.26.0-canary.0aa18745.0","@material/select":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ag5JHaMBWPDE3LbzIRzKPBe2xJlJGcTDA/OdedeQTrDQeqkp9UEvus//4SAj/qcGRcN2x77L5UVNmrW6XiQYpw==","shasum":"9e20b8555dd992d21d696c6bd56f8549cf8df812","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.0aa18745.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhawt0SZToe1v5A5TBiArUz5dM+pvr3joQxyEeKmB/awIgE8/QKVIrq9JHyHe3vbhLV+aUMDh/S6cD/pcA0xPvS2g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.0aa18745.0_1635876507781_0.2945087968271227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-select","version":"0.26.0-canary.f3e28323.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/floating-label":"=14.0.0-canary.a986df922.0","@material/line-ripple":"=14.0.0-canary.a986df922.0","@material/list":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-floating-label":"0.26.0-canary.f3e28323.0","@material/mwc-icon":"0.26.0-canary.f3e28323.0","@material/mwc-line-ripple":"0.26.0-canary.f3e28323.0","@material/mwc-list":"0.26.0-canary.f3e28323.0","@material/mwc-menu":"0.26.0-canary.f3e28323.0","@material/mwc-notched-outline":"0.26.0-canary.f3e28323.0","@material/select":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-xR23IqrB+NKXtNzteWUnPxL7yXfVCjR6REHn4YjJ3pSQQgyGSKaedStB8+spGVg0jP/pdAgyRZMKcX58pxJ8vQ==","shasum":"9bccb2261634dbe57ce4e2fd5725d8eb4306f72a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.f3e28323.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChwED9j3ofdIJpD5NdQ5ypjdVrHLXzla9FhbJvyKOXbgIhAPee1NQv8qbeulih00fwNbf/u2sJHcXHW9qV+sGAQIeS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.f3e28323.0_1635879609798_0.44926519880920557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-select","version":"0.26.0-canary.27e05c5d.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/floating-label":"=14.0.0-canary.a986df922.0","@material/line-ripple":"=14.0.0-canary.a986df922.0","@material/list":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-floating-label":"0.26.0-canary.27e05c5d.0","@material/mwc-icon":"0.26.0-canary.27e05c5d.0","@material/mwc-line-ripple":"0.26.0-canary.27e05c5d.0","@material/mwc-list":"0.26.0-canary.27e05c5d.0","@material/mwc-menu":"0.26.0-canary.27e05c5d.0","@material/mwc-notched-outline":"0.26.0-canary.27e05c5d.0","@material/select":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-CxjPUgocDwI0kS2/qwslItJIERcq82VvDOmxhqudmskJizMHssGRp7j5lUh9NgrH3dGaWjXTU/2lUpcYCclBtQ==","shasum":"59ed46dfee236c9f599b10555b49dcb9f6e4ef33","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.27e05c5d.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfAvkFUSFI1l2jAtjjxGHJpqiFBWB5Frsp1l/45CYzMAiEA/Tydj4Kn1DkeqFCXI5jLSWmo2PBfJXmb3YkaHa6rAfM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.27e05c5d.0_1635965136046_0.2764773590072942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-select","version":"0.26.0-canary.b9e44af7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/floating-label":"=14.0.0-canary.a986df922.0","@material/line-ripple":"=14.0.0-canary.a986df922.0","@material/list":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-floating-label":"0.26.0-canary.b9e44af7.0","@material/mwc-icon":"0.26.0-canary.b9e44af7.0","@material/mwc-line-ripple":"0.26.0-canary.b9e44af7.0","@material/mwc-list":"0.26.0-canary.b9e44af7.0","@material/mwc-menu":"0.26.0-canary.b9e44af7.0","@material/mwc-notched-outline":"0.26.0-canary.b9e44af7.0","@material/select":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-72RN1DphIa+Hf12+8nRN/CknIESQorPQuTJnfgB4U7mCedi2bdLu6LtQJAKxttjF5hYweAoyg0lTyWbuPeIQzw==","shasum":"d52ea73ba05afc3b1e81a56e7ce763db320befca","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.b9e44af7.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwF8eErGSOsoX0rVyfD+M2ZTIn+B2P9wXURc/EgmLXvwIgUoOM/7EUSM8c6zFvpxGpDlk45GI647wwigai7277H/Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.b9e44af7.0_1635966279480_0.6283826658247691"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-select","version":"0.26.0-canary.448f6cb9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/floating-label":"=14.0.0-canary.a986df922.0","@material/line-ripple":"=14.0.0-canary.a986df922.0","@material/list":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-floating-label":"0.26.0-canary.448f6cb9.0","@material/mwc-icon":"0.26.0-canary.448f6cb9.0","@material/mwc-line-ripple":"0.26.0-canary.448f6cb9.0","@material/mwc-list":"0.26.0-canary.448f6cb9.0","@material/mwc-menu":"0.26.0-canary.448f6cb9.0","@material/mwc-notched-outline":"0.26.0-canary.448f6cb9.0","@material/select":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-/4v1tN1k0Q8K/RzXv+4FEShYInFo2ldG+9E16LZljBywWuW7KVhNE6rEO6MKydRzSRSMjGMVx2wT6C2BrtytkA==","shasum":"64937212a8f48c896f4b440011595b4c3dbd6704","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.448f6cb9.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8y0aKL+W6zkX73aQJIoZFLv9Kin/5/HIMfNFJKuaq9wIgaCIgvMvD2WJem54Gu3pQAoPfqVPRPKVmJ7MsGbsXlYY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.448f6cb9.0_1636049310685_0.6452360148780256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-select","version":"0.26.0-canary.8067ce28.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/floating-label":"=14.0.0-canary.a986df922.0","@material/line-ripple":"=14.0.0-canary.a986df922.0","@material/list":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-floating-label":"0.26.0-canary.8067ce28.0","@material/mwc-icon":"0.26.0-canary.8067ce28.0","@material/mwc-line-ripple":"0.26.0-canary.8067ce28.0","@material/mwc-list":"0.26.0-canary.8067ce28.0","@material/mwc-menu":"0.26.0-canary.8067ce28.0","@material/mwc-notched-outline":"0.26.0-canary.8067ce28.0","@material/select":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-gRTd93MrSQRPRcxDVy/aqVolh+UnUIsDyfCNbkbNKZWYdoedp34/fkqH+Z1vxDEDqWV+bt+8RGT7Ny5Jk8iacA==","shasum":"d00ebb4078e5d5223a22423ead7df69a05f94d4a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.8067ce28.0.tgz","fileCount":13,"unpackedSize":211045,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDV77OXfgW21IQdkplQR9QFi8g2iTUNCXsTTj9phGrNnQIgPuJbWgg9FPu0BpFHiH0yqNMF5gRRW0SA9Jz6eayHKYM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.8067ce28.0_1636064582442_0.7014337438861915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-select","version":"0.26.0-canary.345c2bb9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.43d08ba77.0","@material/floating-label":"=14.0.0-canary.43d08ba77.0","@material/line-ripple":"=14.0.0-canary.43d08ba77.0","@material/list":"=14.0.0-canary.43d08ba77.0","@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-floating-label":"0.26.0-canary.345c2bb9.0","@material/mwc-icon":"0.26.0-canary.345c2bb9.0","@material/mwc-line-ripple":"0.26.0-canary.345c2bb9.0","@material/mwc-list":"0.26.0-canary.345c2bb9.0","@material/mwc-menu":"0.26.0-canary.345c2bb9.0","@material/mwc-notched-outline":"0.26.0-canary.345c2bb9.0","@material/select":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-faAht8ROD9fzwuhXClzBHBRrQUpg1br9of4leDsBeCP0+86XQYYO3MJi8985SMwInxJh8OHrft50Uztn428Smg==","shasum":"6c507a0e13a3f52992d451a764429c091a9f9d54","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.345c2bb9.0.tgz","fileCount":13,"unpackedSize":211045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP4oCRA9TVsSAnZWagAAV10P/1QhoG8/+wcT61U0rEqC\nRU0mfV/N/cTNf7YRpaJDQ3tR9H2Nn1Qob1zMNqyF0KtTvIEC+g+iDn3IEpHk\n8j2gzWMxPXQOAuKMKWmG9ggNQgyUNypjktqCeLMwufsUf/LHIMzP1VRG1F0q\nq6G4xle8w1aja30/pmaz87FWqdmU6f8d0IVEac3Jd9EToAZN8/a7cMJikBnk\nBlXRsXjxu4E3qvUyPVONV1HSMed3ilV2XDzAJcBwF1a69VrhVfzB8WUojsrF\nOUwFx79oouT/2jxAAHi0cxR4DvuVud49M1W1vwhi/v8vcPpDxu5ns3MpdyaN\n9xOGHB9Ycrtp+MGLrsaevOQLgULgBCy4KXSaY6cT0zR/w7zYjyHOs59rlTap\ncNskco8pPNnTJmA8SW8JxHKi2fAsOwZ10vqqtf5fFImpUVih1Hm1SGYHdSLE\nWglZfUvxpWwu4hHC2fEIleVWgXEQli/liVrMeRgFQ+Hlhi4UGJz+TcqrRi35\nW2xYLUkaN09dFNXpYmyoNj7jianUY9ohzTZHSpT/2xhKe4spD0KrRTMd7LZd\nv9QJmdtnrXdE4duAlvC4ePeQwh0Noasc+T10+xCywQ8AmOuPPuaxpVHDoRfQ\nQyQm4LOU8cj4AeWf+8HUXvqUiKmWyx9Or/hKZ32+i1a9pCmBmceopKXpKdI6\n8bVJ\r\n=J2jm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHP5arVqR4BILs09Fzce9mZYAGoqcf2iaxR1K+rUrZOfAiAOvR5NU6LrdXcOvzjaY41KlMmkXg9hjWxXUeuwIybiuA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.345c2bb9.0_1638465064707_0.3535974992953479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-select","version":"0.26.0-canary.0547aeeb.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.17a072535.0","@material/floating-label":"=14.0.0-canary.17a072535.0","@material/line-ripple":"=14.0.0-canary.17a072535.0","@material/list":"=14.0.0-canary.17a072535.0","@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-floating-label":"0.26.0-canary.0547aeeb.0","@material/mwc-icon":"0.26.0-canary.0547aeeb.0","@material/mwc-line-ripple":"0.26.0-canary.0547aeeb.0","@material/mwc-list":"0.26.0-canary.0547aeeb.0","@material/mwc-menu":"0.26.0-canary.0547aeeb.0","@material/mwc-notched-outline":"0.26.0-canary.0547aeeb.0","@material/select":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-7DaOl0kimoVvvJdf/iZZtZso/599Mfv8YEkC9+m+zXy5LmSD5nH45RcszxRayOAplZrHXIA4XJkaYKXsRYfQpQ==","shasum":"3cdfe60b43a3284918280b8c414d623082195efb","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.0547aeeb.0.tgz","fileCount":13,"unpackedSize":211045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwzCRA9TVsSAnZWagAA1MMP/2RQqoUnjg+OWZqlOX1I\n+WYSZr40IDmy8xabQJAGyn57UeVAoceyoTSqRElBxYXuiBhll5mvAu8SXqJL\nraG3Xv27DnqRjQnp/U24lK6XFVB4/as6IiG2Xriy+Jw5mNrzchMED2jB8/4K\nCgWonq0qxL6j6KSYrAhqxZT+kM9jdx6jCXUR7XrtyI34iVboDqSqSlMQSnig\nsYm+8u0UKkD+PyKjjvptsOKzhjXT+AhOzskGIXG1WggBGmmIsAAjz3wcFTDu\n3YYPkgN1nfnU4aZvWXJTaa+MdkCQCwDCBLDVBWSAN0QeLKbH7sAeezC0eFyK\nKIOT0VFjVh5kzQe4zV3AwgpZKoTAdVAGnDUHVzaEAnZVBjYiEkQJdUnWhgsy\n1QlflshSrov870H7Gx3+qKzfilCLDTkcBQCk6iW1qmDj7Tsj7GONDpHmv3fQ\njyy8ZptfU/52fyZtJ21x/5TF0Y4mWQPdD6GC2AwluYER90RNuymX9xionc6P\nEcTcIHQrwYirhtDlOpDO+/R510V1HW675Go1E6KANmUcC4OAtfsBTLG19wJp\nNIwOz4nxLV70fWRE6bCzxPv+bjBsUoGMyHhlgKFc4pnbPe2Zs4D4SgIw+TvR\nhBNPmhkMG1rFqUkDNn0KzpRSMxUEKad6Zem4I/5CbYW5hKKCpeVxSshL256N\nUxOu\r\n=KES7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxO/Ows+kLrh01fVwhvGRqWJdydR785mzGO4FRLwejfAIgdQzOphyiSOX5/qeL6K9Sscg09KXe//3Y/cJhG0Snhj8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.0547aeeb.0_1638808627472_0.1443502132397192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-select","version":"0.26.0-canary.3b2452cc.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.b6510c8c1.0","@material/floating-label":"=14.0.0-canary.b6510c8c1.0","@material/line-ripple":"=14.0.0-canary.b6510c8c1.0","@material/list":"=14.0.0-canary.b6510c8c1.0","@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-floating-label":"0.26.0-canary.3b2452cc.0","@material/mwc-icon":"0.26.0-canary.3b2452cc.0","@material/mwc-line-ripple":"0.26.0-canary.3b2452cc.0","@material/mwc-list":"0.26.0-canary.3b2452cc.0","@material/mwc-menu":"0.26.0-canary.3b2452cc.0","@material/mwc-notched-outline":"0.26.0-canary.3b2452cc.0","@material/select":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-t1Q3gD4ZLOhSEuAEoNjlI++vbjRSxN0BTCnvw6jFkYJR4yo1xI+pMrL8Ng/O3pmOJG6YthzZtwTczfdpymlO8A==","shasum":"26038b18951e795f9bb82e509b2446b97893f9b8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.3b2452cc.0.tgz","fileCount":13,"unpackedSize":211929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUiJCRA9TVsSAnZWagAAJPMP/3hlhqmym99y1TefHIIX\nGfBAkI8wVPQUmQKgVc6qHXfIlvXimXH5oCkB6fkWJQuOo5oVkTblU6ecxbqY\nR7D5Ia3R08pUU/D0D8Stx+AzPT2S3WosiBw1DYBtAJLQXqp3wuK4MBGBfXA+\nhnWYDI7GL2gDmDRaf3Evcy2zpLzsmZ116oAg1z0ddBwna+2lxa8sH2FvT62N\ntv9+iLaLyGVUK6FMXoEEDghmymFjh0JbidiYoH/4pdFYmUBGWUHsYeLsrQy/\nwIEefKs7z/fLj0GJg/f4654blqquE0/E97IqHS1lbkmqA3wO4tHcq4W1ctEC\n9GD+wfQefIiQ6/KiBWQA7mZcfhCa8Txssr2wkq3P+NMY+TM2w/NytrWqFe3p\nYXoyGd7W8sFQhzxffykp1UkoVcyz9+gvub+QORczxVLWZO3CyKI+GppE6aI5\nJIz4aJcDnJ5PfvvPUVkdyHdAWlLzFopdjZSWcrniU0jV7/DEIiqBSrmVGzPD\nzPrH81WqfTNTwtZ/S3yvElhkBLiqMoJNoBhucyskd7zqnzRsrIU0krMXcBEi\nEDJ4iparAhcu+fqYRXMtgnEmqCMC5SCLvgnXu8yF0TbFxr+7QuWmwcl22Q5E\neU1bVI3K20SbfGrni8jaSZZcnhrWiXBC0wygV21C/RfTt2VAxoYb5dLsxh/n\nIEwG\r\n=qVml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUoFbxq9TTrXX25Jzz9cKSXuUU+Rkg6/nyq/EGFn9iigIhAMrfL0fFKwc7ytA13fUDBFB5zNFItLYj7uCNUi20VURG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.3b2452cc.0_1639008393185_0.7734706567766132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-select","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.f460e23da.0","@material/floating-label":"=14.0.0-canary.f460e23da.0","@material/line-ripple":"=14.0.0-canary.f460e23da.0","@material/list":"=14.0.0-canary.f460e23da.0","@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-floating-label":"0.26.0-canary.cf7ba5a9.0","@material/mwc-icon":"0.26.0-canary.cf7ba5a9.0","@material/mwc-line-ripple":"0.26.0-canary.cf7ba5a9.0","@material/mwc-list":"0.26.0-canary.cf7ba5a9.0","@material/mwc-menu":"0.26.0-canary.cf7ba5a9.0","@material/mwc-notched-outline":"0.26.0-canary.cf7ba5a9.0","@material/select":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-OilnIeTl5aVRoscGmuVk+t7QxLkPdDwzrPKsAVrzqJGQ5Q7LthMN4IrrkbvswkLCpwYSvCbzqjbXYQKz0OAwdA==","shasum":"2d98b51909b3f0ec106d03ae2d1f1a6dc43a4b7c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":13,"unpackedSize":211929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6WFCRA9TVsSAnZWagAAzTkQAIidnvPtcprO+fjuIKc0\nhUR+3fQcesPyRNR7uXdk0M7L1+QkiSrtZfee+qoQuNw4k2LBiFPQzbgCQJ96\nZqgCib5yMKQhA/nYrIJHSQ/SyYNSGtDnUGqxiyB01tTLMIq8JSHUog5N5S3Z\nXFM0pnaYvQW/raG1JjJ0t04mGIFyqGeEgS25+SBRj3hKEHvK0KstMbnrRzxr\njEnaJBZkoDVcfPoVeODMNY2AZOq5bWXYvERlKIZxYR/5ExYtZ7y832I2xAtU\nBRxQedcwA06aFmbIxOqx7W34ebR5Pvfl7dgzu49rWM3dxKEUvNUK377HMtEs\n/r4nubf5ebHCkFE22risL9L16dNiMMPvjG9qdE2ezl7SCsbEsuGN8pKfHGm5\nM7H5pNdOdvd2gXgA0yCSmk0zPyBRMaqmm1rJ6YS13hCtkCjf3WbTJpJKJH3j\neej38geh4jqpaColgUA+mcYY38diEqhsAX7YYwmjfRJA844n0hwF1NKMz6iL\njRFQO77ec389AAV9JYAhr5zkserkIa60pjLxIxjifv2WRwIArlLULVWXBX3P\nkqsCtKQJTDTXjRzSgiCA8TiLym/8Mq0bXiPETPvZtvkz9YMs90emhiCOsTnB\nMYtwEx1aPZMkdLY5AdJx9ZxVZiYYFFDmrQ0rlK8Wi2YGehi97Y/+kGu+2KfK\nl0No\r\n=zDNK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkzMHsg85yGj3Awb9xqvjuZ86PhEQ+eudiYI47ymxinAIhAOhQ7wYN5JglJ2VpucFnu+jKI6ngieeqy5lb8pXYx04l"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.cf7ba5a9.0_1639163269009_0.49706668387024733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-select","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.3366a71d7.0","@material/floating-label":"=14.0.0-canary.3366a71d7.0","@material/line-ripple":"=14.0.0-canary.3366a71d7.0","@material/list":"=14.0.0-canary.3366a71d7.0","@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-floating-label":"0.26.0-canary.e1bcf14e.0","@material/mwc-icon":"0.26.0-canary.e1bcf14e.0","@material/mwc-line-ripple":"0.26.0-canary.e1bcf14e.0","@material/mwc-list":"0.26.0-canary.e1bcf14e.0","@material/mwc-menu":"0.26.0-canary.e1bcf14e.0","@material/mwc-notched-outline":"0.26.0-canary.e1bcf14e.0","@material/select":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-x4X8dt9gPo9QvR+tYbRD0wYYzfxuae9Cofvm8yBIDYqdE/flQwh7mSALSTFHvvEPLd0Go5xFKfs+8eCu9im+sw==","shasum":"49fa2a54f56415779ee20ec9ce6429ba7bf42c4b","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.e1bcf14e.0.tgz","fileCount":13,"unpackedSize":211929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3eiCRA9TVsSAnZWagAAUWkP/11KnIKdxJhKVzr8Qv79\nPKbliR4payM/KD1YrQOtQbMSuJTGq11MUFVVmnfhQP00mkl+GJhnbn/x2QQl\nq25B6Tvxu/z2X2hPTkRyf4i48FeHeUS4/3IZbhcXZlD8cw+plkX4ryrDvICM\nUj9BT55LxWDTjIAtCgutwaJ5yk3xQVyccvIcicsSIwOW1Sb/ZLGWruGhCKs9\n7/oX8YHtsjnKiCS1QMxDN30CzTNVTEt62Yo7lDqKaJia+qxtncJtZyvjbAy4\nQF0MTBMSdMzgiEM8c4G3nB1nILYl6IYie27WCJa7FWHtlHJtfhfsViiSmifh\n4C9AZYaQkCzp+alid8OtIWEVdCJVis8SjJLkXT2fi0QCidT3LmM5OjARniNY\nu/GXM8RqtAnlq36I2jGJ3mEX8EICOQ5YZep/jpDtUFM9fvPHvvLbdihDPyMu\nLafWDXn7G+u4guQYLdLSd1Rrwx5zQFgrQQqE3K2eUvleQ4f+WsT6YiiNJkKL\n13VkMK73AG8zuJE9c5XePXkAIJOQhTmYcxINPLiTiA3gf0gHMC3QbEz0Jtaz\nvam00TxRCPhc9HA/hg/oileOq6PRsIubtRfw5KD8zu0NBW7meWkmtiJW/hK0\nSMtaHTaJfB9hOyXmkg5neaEzLKlKjoZMPIq1CQMoTbptYcCKFwZ2nBnBtCTu\nMm39\r\n=mSKI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFjDmi6riGbAk0sbwiBfkw52UwfhUEgXN1g68IytqUGgIhANJW05rJeTt+uF1q0ozzdM+moSZsVx/dRuVEHGwgKZ7i"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.e1bcf14e.0_1640724386478_0.8518474603323891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-select","version":"0.26.0-canary.b9d35b69.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.c047f7c19.0","@material/floating-label":"=14.0.0-canary.c047f7c19.0","@material/line-ripple":"=14.0.0-canary.c047f7c19.0","@material/list":"=14.0.0-canary.c047f7c19.0","@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-floating-label":"0.26.0-canary.b9d35b69.0","@material/mwc-icon":"0.26.0-canary.b9d35b69.0","@material/mwc-line-ripple":"0.26.0-canary.b9d35b69.0","@material/mwc-list":"0.26.0-canary.b9d35b69.0","@material/mwc-menu":"0.26.0-canary.b9d35b69.0","@material/mwc-notched-outline":"0.26.0-canary.b9d35b69.0","@material/select":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-OQdq+6psoDYIxfVR1qZiMJQwnhg3um8VXZYeOZT4OWuhobbxx107+Tcn1wzapRecOIjPX3k77OgJtmWR3owamg==","shasum":"bdf6fc5be23699fdb947e4ebf63617073f378fee","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.b9d35b69.0.tgz","fileCount":13,"unpackedSize":211929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eM3CRA9TVsSAnZWagAA+cgP/07nVhqPMPVidn1cPDya\npb4ds66wZWSJwn5pmYJC8Xu4Wwuu65sVeSjfPYRF2PfvwzI8JuXarPirII+Y\nxfFH++aniXXHZXM0pGG/uoQhhNJkk6J5KmYulpGiyCAjdZA/Fl1z2StlEsQ1\n8kII1Y57UZrJxn/pBA0i9sPgF2wqWQWeSMyi9qBQgtJMs+pYULItzGOSlf56\n3VqUScZomiYC6IB3R3+IXikFbCG220bWbW1/cjKbK5Zoklh+AdeKz1bvFs1V\ny/qlfB3tBj9NwVQUprqS9nZjgfpy5FsA81wGhLbwNXVFQbp0hpWsYSN8pWYc\ncz8+T9mW7lyB+eYiYYjIf6c8TXHHp8V1GtlXNxPazWUrZfco+F1rD8HkPCa8\n+s6bgKT2SlKhDlXGxYhsHi/r7bQ6+fzrwQdBLJ8xIOgpPuAR0dn6RBaqnyV8\nJhR5/BmD6Cl1yY2m02+1FJmiK/2AfaMFB49U/n1DypD9hPUh2HFuiWhj20rY\nBMvcxuY8nYhuBb1ga0rlzYRqYFF6oZlCz4fsEjEc9C9BCnM6bbI/6ym6eAy/\nAE6MNFnsxs852lj1VuWGdtH5TCETKyL5CIzgdcmo3pZu7WQ/tmOn918IH31D\nVRcsZ7mfX1kLTF4xfhZhHcvfILjf9rYONBr1kiVGYn2rji0yYEHGKT0JHdEg\nku4s\r\n=XCx6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsg4iRmi7DEIRdZsUMSidfGIroxasvB377LxnB9FbdwAiEA1WV44QgNfEkJ4PbjI69x/pAHTZadB/uY2isokzANdMo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.b9d35b69.0_1641407286918_0.3498611195478205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-select","version":"0.26.0-canary.2afff08e.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.05db65ec0.0","@material/floating-label":"=14.0.0-canary.05db65ec0.0","@material/line-ripple":"=14.0.0-canary.05db65ec0.0","@material/list":"=14.0.0-canary.05db65ec0.0","@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-floating-label":"0.26.0-canary.2afff08e.0","@material/mwc-icon":"0.26.0-canary.2afff08e.0","@material/mwc-line-ripple":"0.26.0-canary.2afff08e.0","@material/mwc-list":"0.26.0-canary.2afff08e.0","@material/mwc-menu":"0.26.0-canary.2afff08e.0","@material/mwc-notched-outline":"0.26.0-canary.2afff08e.0","@material/select":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-42RSthSujDhI1RKZAYYuY97gXFFuOFgL+N6+lK0yTRu/lErilHjknnEcR3DmwcVezUT5lV5GlOw2kUBPqq6wdQ==","shasum":"311e826d419f3541c7888f68cf2e875f1275dd2a","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.2afff08e.0.tgz","fileCount":13,"unpackedSize":211929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vxCRA9TVsSAnZWagAA6DMP/iM+uNzSFsvBzcWmeUFG\nmDvvOsSvSVuDlKTLKKWLuAHg95LuHdtfGtenMXQAD7bxOLXxNmR4bCVv3TiX\nxVNNNfPz/W8t5KsXl+Lz15O9LumfmJe6cvw4FDStA5pa7kQPyBXDsFv7ppPR\n04lb62wLoU4TL0oxlniNP5hEcqEzZDfUvoEdmfvC2/0ru7WPEwu/1Z2sN7nQ\nX4B5pY1o072fCmjXsaeR/zD4oji6sNcivmWOeaEow7KvcG7yPFKYNLHqrE9F\nmmM56N/FTqkMdXBUXCkSL5G/vFHKYCWEIpP9P9Vq4XWyaFnfK0DlnIldJTHW\nCcfHUBNH0+ZPE69dP70Ec54jqQMe5GznyfZqsdj3yyHRh9XbLLJ5r2ic/3Km\nnMTVy0QOphgoV7rA9FhjRlitdvJbDIEZXHiRKo4tmmFEwBNBFCpJkwuChDiV\nn3zVW6t5gqzAWOsMx+uUf1cIX0J9FMJQ5GMID66iC0vPSTMoPMNi5D291a6U\n+hQaA/HDlCQWfk8m3wzfzI6Sh9njwSfkFyc/wn7khwCsTItG4uIWt1l9GIIi\n6FVCLLpLyBxS204PaEnjdOcDNJ6x1L9qw6Ed0uvR+R1P2tcweJUEex2jptP+\nzRIYj748DpCn2RcqlY5OMOB/XVzXZdYJe9Vboz/J9aZYQA7ymHtc/RvV/+Xu\n6JrB\r\n=OvEl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHRD6iPwrLIGTqxoDgudgKZfGlBvxd5Al0oUUaUZpnt5AiEAgatm9vple3+c9iFxI+nEUhTlkI9OiDS/fZKf/Wcmmb8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.2afff08e.0_1641507825534_0.43420941657502854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-select","version":"0.26.0-canary.893fc857.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.6ca8b8f85.0","@material/floating-label":"=14.0.0-canary.6ca8b8f85.0","@material/line-ripple":"=14.0.0-canary.6ca8b8f85.0","@material/list":"=14.0.0-canary.6ca8b8f85.0","@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-floating-label":"0.26.0-canary.893fc857.0","@material/mwc-icon":"0.26.0-canary.893fc857.0","@material/mwc-line-ripple":"0.26.0-canary.893fc857.0","@material/mwc-list":"0.26.0-canary.893fc857.0","@material/mwc-menu":"0.26.0-canary.893fc857.0","@material/mwc-notched-outline":"0.26.0-canary.893fc857.0","@material/select":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-vm37a+p10E42QAFQE3fC3k6lBvxFZDv48lIjtT0kMBJKYq5i8V2iIkQOLTD8BUUF1skbNYcBIiF4lBy1i5XBGA==","shasum":"5a9f6075e9d7f4ea0af69347b88db6bda1a24933","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.893fc857.0.tgz","fileCount":13,"unpackedSize":211929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2Ix2CRA9TVsSAnZWagAAu10P/i/Vebd8y+kmFNhfNlBJ\n5SfJE8oo7uc8fnsv6vu93hpWCO5JJDxT57HfOsxObuyqjyoLT78VS7U+c7LT\nOjuP+5RjmSZQbv+nslsfXPcPg6iaVtN2MlA+JyH48yeEbIDG1+mH6h3zaiOg\nBjkO1AnZW18Nn3q+692j24DyRXA53orXQujt0AOXIXP3QMKG2t7kA8MDmGZH\nSKILSeHQjHTG+4q2zB1cUeplAqJz/mvKWaiQnjlCxs5DnON1K993iwd0LVyE\nhYf9U+kxJjSY91okt70Uu1ZB9YsGmeJRPDyfxVr0IZXSZwT37xcVgMaB4RWE\ngasCH3uJEImPl3juk7UWrVIgwDDGlx6X+lgFi4ZoKWFg2PcJd4qhGODE/F4Q\nYlkijZBvNM6DEL4HKFBeQI5rXinZ1r+XKusQ5BxyeTTziaWhhte24rrqFJMy\n/Y1a8JHzQQ8aUuiTXRGHc/ti2fiZPUs9dDdIpLlJ8ZPfJikY16m0ty6Z3AxG\n5AqFiqE9pwgwm0tCKGdeIazRBGYJkmkhRGTMvcolKAf/ItfMokyO08424ZV/\n7kgvDNhnS9Xnkk/hQ/uB+md3b1Q+tK5jJBHZiJ1l5VurGUG9oiCBW4GTR3YF\na15H8ehB0DBnCrnaf0ypeg42Q5uZr32b6wQZxZb3Zy3elX8TTdtN73y1ChNA\n4ivl\r\n=8FyF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8o6VxGTZGhiVGhS4fKq9CmuN1ijcuX35+kuD3Iyb9ogIgAnMU78K0GJtWmK4MLsQ6bZF0nq/zjrepWvsBHhvN6iQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.893fc857.0_1641581686743_0.4950291737763812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-select","version":"0.26.0-canary.69ba13b7.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.c14e977ee.0","@material/floating-label":"=14.0.0-canary.c14e977ee.0","@material/line-ripple":"=14.0.0-canary.c14e977ee.0","@material/list":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-floating-label":"0.26.0-canary.69ba13b7.0","@material/mwc-icon":"0.26.0-canary.69ba13b7.0","@material/mwc-line-ripple":"0.26.0-canary.69ba13b7.0","@material/mwc-list":"0.26.0-canary.69ba13b7.0","@material/mwc-menu":"0.26.0-canary.69ba13b7.0","@material/mwc-notched-outline":"0.26.0-canary.69ba13b7.0","@material/select":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-FiGy1O5hjmwO63AcsFGQIKJp4EUsMNCzXTkKKq/YO9LWMk1sfOdpcuTajhMQnjmaNqs4xmQf/p2RWQQNz0WMTg==","shasum":"be1cfe82800232aa13d87d83f9ac1ab2b515cb4e","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.69ba13b7.0.tgz","fileCount":13,"unpackedSize":211929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+qCRA9TVsSAnZWagAAIs4P/0/ZAdAbv8/GgUJX2iCh\nr/0ak4oorSUAEddCyt6JkPlo+dmdWTqclUzlRU2N5IOUtnmJPsQvZkzaZndo\nNgVS0n3wWEQyOVJHBtcOG+ElAUd2dXApzfWOj2bIvX5vIWBLLvIS6xzTQK09\n78E+YwaLplFhs9A0Nwmafvet911pH73thkrshlYSLf8Gm361Pn2LdJWlaPk9\nKhJ2BOmHM1b3k5HbeNlZaDn+hK8opI+vpVZCxxJO2L+8Hrul00Erl4np+sfq\nhm+GfBNlNYmRRWFuasorUTKw5rlPAVpvjpmjBDjmpfCwC2uF8cLmGKW7XVPq\navjkAA5IxoXKtC1p3Bp6x3+vIcFItoDVsNWtmLFkIGSTi8AxA6I2H5yNSyl7\nQvzqu+zrM+dM1Bkfh0WC67vKxArh8XbtHH6CsBwTIWJwvY+hm6+4PpudNvnR\nRLPfbVcUMN7bbmB57JzgemPw1Ipd8OPEnAgJ+7RezIXXZkhOutoRcG68cqKm\n30DHqVW1H5BogPBSSfzEfA1j5eMr4qU0VWBUjl8SenCPwOx/hCRuX/1zqjzX\nDRqM76c6nWwukq5Q/o0dlgD7rkAtVBrKAgRypSzNl+xSqGNTWYMbqBtRngNn\nn7krJJ8D2ebpUSexax1gmP/s5sad8+Zl9w+z5aUtFM0nzdz1aLNV/IHVqfhW\nJEOA\r\n=pSJZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDulDHzX4RfWtYk8ATdvuNeeSgBi++vRGKLthcZ2ZtdZAiEA9TZdAkJ7CoPNT7qg1HXq6j7y22VOFZzkK68AsSBg7XI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.69ba13b7.0_1642631082111_0.06788649465146301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-select","version":"0.26.0-canary.0af8ade5.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.c14e977ee.0","@material/floating-label":"=14.0.0-canary.c14e977ee.0","@material/line-ripple":"=14.0.0-canary.c14e977ee.0","@material/list":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-floating-label":"0.26.0-canary.0af8ade5.0","@material/mwc-icon":"0.26.0-canary.0af8ade5.0","@material/mwc-line-ripple":"0.26.0-canary.0af8ade5.0","@material/mwc-list":"0.26.0-canary.0af8ade5.0","@material/mwc-menu":"0.26.0-canary.0af8ade5.0","@material/mwc-notched-outline":"0.26.0-canary.0af8ade5.0","@material/select":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-9boD1DDfBOMhQ2Liu2KwDSs9M6MGngI0Y3r4OzbgP5wSuGDQTqCsYbGgtKF53lIqbQ76BA57oDGwR1XONklHWQ==","shasum":"f8b50e42876a72d50493d73c16088ff4ad5b903c","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0-canary.0af8ade5.0.tgz","fileCount":13,"unpackedSize":211929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZfJCRA9TVsSAnZWagAA1nsP/jGQ8+oaxOkYBCbDKnKC\nfbJTQ1S8PS9Sp5sdfTFWQzCiotiDt0bG1mH7D38W/GsS2gUA701Y8XDrqd2P\nyGf+obuoXfePvemn8uk6+QEjea52aZGWMusK2fL0l7TKH6Rh8SyzX3JVYZZV\nAV5LKhnLrD6P9rsdzb25PmhIuX45QpSDvb4Kb0Wr7FTWuBFG0fNHlkH7JSji\nTAGNDUQPExmJTYDDICPIbfqq97TA+O8wzagUQGAqkUSq9aU3W0i7qOu+IwsS\nmCdT1CwCHcfj75wLCzJnZn3f5Sq84XvfpG/S4W8jdRg9uNACyaN0aOm4YIzC\njcuQPMW0lnox0JiubUmAbWA6k5fr4eaT0LxqB4YhTk/1K9pYkGfiGAWTejU7\nhffZ/UVIpAd/SwUWz2hgiXfRJiJlb6Zw4Lm6zv5yirSwliV8OqPwHiNKt5KR\nyvg+42CZQjMUP6p/I+wa2tDHbc85t9AkqTTYfym9RTKyweTlGcafdS41MUbq\nCYmTgOZQIZ2+/36eOdkzZ9OWsNegeYcilEJznhqrLy+7SHgP3LlLOmzKz9FD\nBh+jeAVlTH9p3abZhjEhidcNCPgRf/3/VNAvJ/HivLF7/yX9pUYEqYFs6FuG\nmucGrZn+jCkIkr3QvalsdDEL4RSXkOM+aYCIEcDbJiXoprEn3K3dIW3hQ8NK\nYlD6\r\n=hcNH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcwZ6X+4T5WXM/StrOIus41nV8empHb2EPkICOb8n8fAiEA3EroKd4CVfV4lkOqmc7CcShlnUm11dxpVDXpbfXJy+Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0-canary.0af8ade5.0_1644271561197_0.14665536709096916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-select","version":"0.26.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0","@material/floating-label":"=14.0.0","@material/line-ripple":"=14.0.0","@material/list":"=14.0.0","@material/mwc-base":"^0.26.0","@material/mwc-floating-label":"^0.26.0","@material/mwc-icon":"^0.26.0","@material/mwc-line-ripple":"^0.26.0","@material/mwc-list":"^0.26.0","@material/mwc-menu":"^0.26.0","@material/mwc-notched-outline":"^0.26.0","@material/select":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-WyOA3VUCqh28Gr7Ms/SATzlGg09k/E+7FzhDVW4ocf9183++c3U12QL+hA4cwXC5WAq9h6TXeDvLTR5tRm/4Tg==","shasum":"543bb4e35a83c2ff9a78906723f576bc93a51030","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.0.tgz","fileCount":13,"unpackedSize":211704,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGX6gkUq/y+s2lJHjhMUH5pYL+SFPGW87fJZbwprGPkyAiEA4RS1ZEADnvBreZamD349fxW7gW9u+0eWI+vl+RqzXzM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWbLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpukA/+KUHPtSdxcmpFQPrGcRTzZ0H1Py6KAhhl9J1bXi2x7t5GEiau\r\noD94Go6x2FakrqqZlQ6Z4TzvbeFYXeA+mtXK+n9oR+l0u6z6kvbEgzcTuHKF\r\nJvDr4fg+QcvsO9Jk6eHfHbjtskcL1DTvhsfeQcBZJqFieW06sxOXfDEdKs8a\r\nu2oIX/OXPo5Pt+AXzCjNn0NaeswfLGVM/vJ1Vi9YjB5J83Wt6BDv7y2dpj2K\r\nmdXp0u1Smf29tgpEI20Fp3k6a+TZ7IqYFvaOJqmBG3JGT2DHK/HgRFLGXaay\r\nqWLp78UydDNpetlowmj0z7+9bZdM5WsvjzzNjZnpqoptNOZcbKpqHEgv0TZs\r\nB2WeIixnvVZqm2GFRL8wseym5nbDE09soZAUnpuBpLEiqrou4I6w9srwZBZf\r\nbJEVuh2BKV1oqODCmmaM4JdMS2JSDHoUkn5oNxOaRFhNkeU6yDwwxZRaCFBN\r\nGs+q428K/DltXMKlxJbkh8q7+kftlfxN1ahWpBp2wMdBm3U3KK8Gz7LZDWZM\r\nFRYgKbk0gySwQMrW3TDxYK6abrUOmj6qcKNqzMOxxH4gLo7GouFQRtUNPhjc\r\ne5DNoBKNE//MQxHYS0PSjRh2FOHPotDsOsWsMJHoIXPdOFCglsxS2BjVEeM7\r\nSb+Cn20B3Q5gA87deMfvaRV4BCySITaPa2Q=\r\n=SCUj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.0_1651599051129_0.6802295047262359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-select","version":"0.26.1","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/floating-label":"=14.0.0-canary.53b3cad2f.0","@material/line-ripple":"=14.0.0-canary.53b3cad2f.0","@material/list":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.26.1","@material/mwc-floating-label":"^0.26.1","@material/mwc-icon":"^0.26.1","@material/mwc-line-ripple":"^0.26.1","@material/mwc-list":"^0.26.1","@material/mwc-menu":"^0.26.1","@material/mwc-notched-outline":"^0.26.1","@material/select":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-glqhi0HeNtm7LgVNW/Vxk2QLm76mjkY0Sw5CFkcedMcjqkoj3fiuTtcMkoQlb4/MeCqgFZyO0xxCOOz9LSNF4A==","shasum":"9b837079644d1c594c6e28a1e62fe93eb898cd09","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.26.1.tgz","fileCount":13,"unpackedSize":212318,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXQsgEv+v/5Gb5ojWdm672C5wIs2McXlCMaPSBMRxA7wIhALhWXiXqOGCVlO9e3D+p2P2G1adFaOZO+PB5kvMGdHVl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXpKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBXQ//bDsJYJfojq2v9gGQTcGHX+fXBke3kUOK1Im7gnbJ6OSnoKBL\r\n3o4R1Q3vwrSqusrRhFy/HGptdD3taPFzf7NzGoUq18jM/BpB/ddW8qOJOd8C\r\nIu6Zl0Tmj1Z6SjoKN7O6C0PDcJR3IM16ws0oalbqvdwvB2JV0CAfguzSylUn\r\npYce9VYxjZnI3TLQQ3+yw5dde+o4ZaQaPB2TIhdSG7y6SJylhmn2DU+A76y0\r\no9k/OWYT5G7k9jhI74otKWRVxGTtCd/EjZgIiBcYfD1UaBviq3qu42b+bsoD\r\nDsqvpyF7xNbUUX33uta3/S+NQrnZHXO0I2M+BFdlmW87Xda5W7o1Q7vQCUB7\r\n5EuC0/Hd55j9WbKuMGtprza2Jdj+w39s1Z2Mtp8UOSpiI2hkecQk9/Mse6Yx\r\nfDYbZ+GcgGd+fCFnfc3Zwwa3X2Ole8PSHZoL16I5M6lp+s5JHy5oTVLT5yw0\r\noTfBSd52n/GE8UvCBLNNu+7q1YUvfUauFnid8cl9Mvm+rXHSGp2Z9XoarKji\r\n1ImGY7GWaJrBXBAbB0zezT8EGTJWS0egU4t4c8gNU4Vil8fKYrKeM+ksiLj0\r\nc5hv9hFc2hM602JvT7xJLMCd1qrghxbAfSbwgRB3X1umbFI+upTizHE6XdqY\r\nasw/pmEGIIWdRx2b+i+D7e8qXDSIZXgOlTU=\r\n=ko3o\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.26.1_1652128330572_0.5247412008282788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-select","version":"0.27.0","description":"Material Design select web component","keywords":["material design","web components","select"],"main":"mwc-select.js","module":"mwc-select.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/floating-label":"=14.0.0-canary.53b3cad2f.0","@material/line-ripple":"=14.0.0-canary.53b3cad2f.0","@material/list":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.27.0","@material/mwc-floating-label":"^0.27.0","@material/mwc-icon":"^0.27.0","@material/mwc-line-ripple":"^0.27.0","@material/mwc-list":"^0.27.0","@material/mwc-menu":"^0.27.0","@material/mwc-notched-outline":"^0.27.0","@material/select":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-select.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-select@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-LTr2nl7gAYq8ung4eWfUz24mey4/K9vAlqJBo/uu6w0122C9X64szBS9kHAb87aD1oxLkxAJCDuv/wwlXV1i2w==","shasum":"d6a555cf7f6382cd4849670e6cac1bfee44280b8","tarball":"https://registry.npmjs.org/@material/mwc-select/-/mwc-select-0.27.0.tgz","fileCount":13,"unpackedSize":213354,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnpJDDhku/qCkc5ozBlwUoTuC25aD5hfpW3FqiM9/dEQIgF7XPK/jDtEeKICvf6zcTLIOkVdsGGQ5V/WA8SSPV1GE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ3A/9F3XqMVvBPsG2LzRU9FPdUL/qG+0D8t+QR4QdXNOkEALz140C\r\ngYK4gogAh8Iwo1RPCowDtZZ3SQSL1G77VrdjHAcF7km1RW0Wf0/2O5z9cHGs\r\nNVVhNF7q1oVcbwcIiWlWyQRHDFajyGhmPmp4i/tjBX9ypw5gZr/Rt7t0ia/r\r\nLOWrfZTH7AWSt84NWdn1IDz06Gx6CPxnx5RgMK9Yasn5PJ0+YCNI2ghebWwc\r\nkumB+iND1w+W5SL5XnD0Q8gffYIwv5wbiQpxBLpmJlEFSlyKdx+yaGuRr/nd\r\n1lKYlbhXAVgTqDHyFQsdBV2wArUNqKtvPmJBDd2QVhyZLPEDouUEuqhtHEXQ\r\n4WGNBxONhWM1FkIANTG1QW7HUoPnCmDJRjvJtj42TN5FyCnxw5v6fk9xHGSm\r\nahAcVTB2BEypNLgM7nr0OvfeRCwZWBXvoVLFIjrPMIBsK8EAhEqvh0Ho4KaL\r\nRxvQqjXB4M9BXyRKBVHw40ZEY7+sVqjkIMp/7pgme0tlFTLWgYsj6UEvQ62g\r\nuNw5y7gBc0/mHkUAPgpdLvcJObZzzwc8P/J7uF2knQYCI8Kgc6l66TN3Hd+g\r\nbBeXNbPqgmwQPhTqwun9KDFz7V8bUXKKCxtnDplLshUKjQFaYovhZ2aIIi4C\r\nYBamM7kJYmZR7wimFTlWCNw86n5qRVXPFtU=\r\n=7wDu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-select_0.27.0_1660331547253_0.7329593535419925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2020-02-04T04:46:53.488Z","0.13.0":"2020-02-04T04:46:53.934Z","modified":"2024-04-04T18:55:33.758Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:53.311Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:27.421Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:51.627Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:09:14.872Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:35.287Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:57:17.169Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:29.527Z","0.14.0-canary.2f164110.0":"2020-03-03T21:34:16.407Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:11:14.027Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:44.230Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:45:07.306Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:55.988Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:44.918Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:46.830Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:46.994Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:57:03.806Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:15:17.033Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:51.182Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:22.728Z","0.14.0-canary.55338c25.0":"2020-03-11T06:32:01.848Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:20:15.553Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:27.927Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:54:21.892Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:44.587Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:50.485Z","0.14.0-canary.306cabed.0":"2020-03-17T21:18:13.059Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:24:22.428Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:20:37.894Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:54.245Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:53.313Z","0.14.0":"2020-03-19T21:28:58.835Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:01:21.392Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:46.102Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:36:23.343Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:59.926Z","0.14.1":"2020-03-23T17:57:50.415Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:59:21.137Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:17:05.095Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:36.586Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:30:28.300Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:37.589Z","0.15.0-canary.1884603d.0":"2020-03-27T19:56:06.991Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:45.130Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:57.911Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:49.863Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:16:41.268Z","0.15.0-canary.072084ab.0":"2020-04-01T18:40:35.165Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:30:20.055Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:36.802Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:39.499Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:30:20.583Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:09:21.141Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:36.041Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:53.116Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:33:05.919Z","0.15.0-canary.25099f79.0":"2020-04-08T21:31:08.492Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:17:02.756Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:38.140Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:03:20.605Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:46:14.763Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:39:11.330Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:53.323Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:31.797Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:42.304Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:59.443Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:43.883Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:38.304Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:47.304Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:57.140Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:39.337Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:54.914Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:48.075Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:38:53.419Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:50.341Z","0.15.0-canary.953015d6.0":"2020-04-21T21:36:14.613Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:59:29.478Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:38:12.471Z","0.15.0-canary.58d51135.0":"2020-04-23T00:45:21.800Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:10:30.615Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:32.812Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:35.419Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:54.180Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:52.973Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:19:07.012Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:43:13.991Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:13:13.182Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:56:13.699Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:36.005Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:45.404Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:14:00.211Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:54.051Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:15:21.898Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:41.987Z","0.15.0-canary.457bf035.0":"2020-05-01T20:51:21.311Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:26:11.987Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:48.527Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:34:10.488Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:17:02.907Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:45:25.579Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:54.575Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:38.662Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:14:19.111Z","0.15.0":"2020-05-05T22:36:36.689Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:59.027Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:15:14.538Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:46.451Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:18:06.119Z","0.16.0-canary.588062d7.0":"2020-05-08T21:24:21.190Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:37.534Z","0.16.0-canary.2772c509.0":"2020-05-11T18:37:13.324Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:06:01.006Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:20:19.962Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:47.445Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:37:30.142Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:49.863Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:20:03.677Z","0.16.0-canary.3270effb.0":"2020-05-13T21:25:08.742Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:43.150Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:50.021Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:25:40.276Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:50:22.533Z","0.16.0-canary.91f63179.0":"2020-05-16T00:35:04.226Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:32:12.119Z","0.16.0-canary.a564b194.0":"2020-05-18T23:04:06.172Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:48:28.702Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:55.510Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:58.874Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:39:25.653Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:44.627Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:31:38.962Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:54.282Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:46.026Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:08:18.411Z","0.16.0-canary.17d33745.0":"2020-05-26T16:14:23.170Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:43:25.397Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:38.206Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:50.623Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:48.017Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:47.611Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:37:06.121Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:35.183Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:19:06.720Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:39.768Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:37:14.174Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:50:20.797Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:59.299Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:29:25.367Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:48.373Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:16:09.820Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:46:25.246Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:31.436Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:59.612Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:05:26.541Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:41.436Z","0.16.0-canary.2e269285.0":"2020-06-10T01:36:12.627Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:40.431Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:59:43.820Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:58:27.073Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:09:11.655Z","0.16.0-canary.58b73343.0":"2020-06-16T21:24:11.280Z","0.16.0-canary.f155c058.0":"2020-06-18T18:08:21.742Z","0.16.0-canary.309779d2.0":"2020-06-18T23:59:08.113Z","0.16.0-canary.e7649968.0":"2020-06-19T21:41:14.606Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:38:21.700Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:13:15.297Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:50.174Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:50.246Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:55:39.341Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:19:28.667Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:48.141Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:54.105Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:30:42.213Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:47.323Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:59.069Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:10:19.676Z","0.16.1":"2020-06-30T21:15:13.327Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:41.039Z","0.17.0":"2020-07-01T19:44:43.036Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:45:15.814Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:59.982Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:49:02.860Z","0.17.2":"2020-07-02T05:58:40.660Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:53.115Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:33:12.763Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:50.112Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:33:00.292Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:38:14.259Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:26:21.869Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:44:03.914Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:51.860Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:54.300Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:38.549Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:33:20.711Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:45:13.142Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:42:32.843Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:24:05.401Z","0.18.0-canary.44966b65.0":"2020-07-15T18:05:36.443Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:55:24.160Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:37.475Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:47:09.412Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:41:29.139Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:45:11.934Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:58:04.767Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:40:25.689Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:42:28.841Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:01:16.076Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:03:16.551Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:30.842Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:59.341Z","0.18.0-canary.718c385c.0":"2020-07-23T20:07:04.512Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:11:24.295Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:43.764Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:59.255Z","0.18.0-canary.94987b64.0":"2020-07-24T20:27:05.133Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:05:26.987Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:48.178Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:59.825Z","0.18.0-canary.99df7397.0":"2020-07-29T02:41:08.430Z","0.18.0-canary.45493e05.0":"2020-07-29T17:17:11.301Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:22:13.794Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:55:24.574Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:51.746Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:55.231Z","0.18.0-canary.887c2848.0":"2020-07-30T22:06:15.390Z","0.18.0-canary.354eb695.0":"2020-07-30T23:58:29.100Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:41:08.304Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:47.206Z","0.18.0-canary.779853ff.0":"2020-08-03T17:24:21.379Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:41:24.767Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:50.040Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:47:24.348Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:51:16.653Z","0.18.0-canary.21c55569.0":"2020-08-03T19:57:28.696Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:23:06.386Z","0.18.0":"2020-08-03T21:24:54.703Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:07:33.434Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:48.014Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:30:30.011Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:39.415Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:14:09.509Z","0.19.0-canary.b6106add.0":"2020-08-05T20:50:05.455Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:19:32.892Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:28:03.521Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:44:31.232Z","0.19.0-canary.96d15938.0":"2020-08-07T20:29:36.943Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:09:06.899Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:28:03.391Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:39.757Z","0.19.0-canary.1583e263.0":"2020-08-11T23:11:28.743Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:51.959Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:28:05.241Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:15:13.433Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:18:00.620Z","0.19.0-canary.758635ed.0":"2020-08-14T17:17:23.515Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:42.896Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:16:19.012Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:03:24.690Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:39.080Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:17:17.632Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:58.688Z","0.19.0-canary.5962b365.0":"2020-08-19T20:29:50.505Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:56:33.332Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:43.718Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:38.492Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:53:14.225Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:52.351Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:24:25.688Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:57.720Z","0.19.0-canary.14a172db.0":"2020-08-25T19:48:34.802Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:46.648Z","0.19.0-canary.34012082.0":"2020-08-27T19:49:08.600Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:49.154Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:47.458Z","0.19.0-canary.697e3879.0":"2020-09-02T00:14:04.894Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:59.918Z","0.19.0-canary.606642ec.0":"2020-09-02T21:36:25.385Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:50.507Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:12:07.252Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:58:15.911Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:32:15.805Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:57:43.370Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:08:20.464Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:48.792Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:56.128Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:27:10.373Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:58.822Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:32:17.228Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:35:00.707Z","0.19.0-canary.3babab12.0":"2020-09-11T02:38:13.927Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:50:03.631Z","0.19.0-canary.a9177836.0":"2020-09-11T17:48:14.114Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:14:18.039Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:06:37.884Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:25:36.689Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:50:09.620Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:44.248Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:27:22.405Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:09:26.070Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:05:21.146Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:26:31.221Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:54.208Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:22:11.454Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:08:07.965Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:13:23.082Z","0.19.0-canary.347110f1.0":"2020-09-28T16:51:06.065Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:58.198Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:39:01.425Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:48.344Z","0.19.0-canary.615d861d.0":"2020-10-02T01:34:12.151Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:42.835Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:48.684Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:15:11.768Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:08:28.497Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:31:16.159Z","0.19.0":"2020-10-07T22:33:46.591Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:54:26.792Z","0.19.1":"2020-10-08T23:06:29.074Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:08:00.603Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:35:02.942Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:23:02.234Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:47:06.063Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:16:41.852Z","0.20.0-canary.3280b686.0":"2020-10-16T00:05:16.391Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:15:16.946Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:58.041Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:50.212Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:25:01.311Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:24:37.342Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:49.559Z","0.20.0-canary.32961593.0":"2020-10-28T00:40:04.067Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:54.110Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:51:23.177Z","0.20.0-canary.124beb49.0":"2020-10-31T00:07:20.977Z","0.20.0-canary.5937f468.0":"2020-11-04T21:06:42.306Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:31:33.167Z","0.20.0-canary.184861ee.0":"2020-11-07T00:38:25.924Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:40.505Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:53.085Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:25:08.675Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:47.184Z","0.20.0-canary.2c553352.0":"2020-11-12T22:43:33.674Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:49:13.715Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:51.502Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:27:11.687Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:12:47.758Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:53:14.737Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:17:33.255Z","0.20.0-canary.761027ff.0":"2020-11-18T22:15:08.250Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:39.520Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:31:22.164Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:11:22.585Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:25:30.438Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:55.415Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:49:05.263Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:06:10.625Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:28:01.927Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:56:41.434Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:17:15.798Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:08:04.367Z","0.20.0-canary.9755be10.0":"2020-12-03T19:26:07.301Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:50:39.983Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:48.399Z","0.20.0":"2020-12-03T22:29:15.435Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:57:34.425Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:50.165Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:47.250Z","0.21.0-canary.635c7996.0":"2020-12-17T23:32:50.179Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:49:40.077Z","0.21.0-canary.41f77000.0":"2020-12-18T00:36:03.042Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:40:31.080Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:03:22.771Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:50:22.574Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:55:03.765Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:59.318Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:48.528Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:46:26.951Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:45.731Z","0.21.0-canary.269eed01.0":"2021-01-13T21:46:07.770Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:08:09.739Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:05:20.897Z","0.21.0-canary.bc113605.0":"2021-01-14T00:46:15.822Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:10:03.360Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:08:16.845Z","0.21.0-canary.2899691d.0":"2021-01-16T01:45:22.367Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:22:10.033Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:53:04.038Z","0.21.0-canary.597ca1b6.0":"2021-01-20T01:00:48.836Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:02:17.662Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:38:29.489Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:37:29.393Z","0.21.0-canary.664a2927.0":"2021-01-21T19:19:20.413Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:48:16.665Z","0.21.0-canary.027365eb.0":"2021-01-22T21:08:17.614Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:27:18.008Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:33:30.189Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:52:40.776Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:58.800Z","0.21.0-canary.946f5563.0":"2021-01-23T00:44:19.166Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:58.758Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:07:01.798Z","0.21.0-canary.14e01610.0":"2021-01-27T19:52:15.460Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:55.040Z","0.21.0-canary.5a328336.0":"2021-01-28T19:55:31.047Z","0.21.0-canary.533b1251.0":"2021-01-29T15:12:36.222Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:18:13.771Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:04:45.951Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:49.342Z","0.21.0-canary.5160e548.0":"2021-02-05T23:52:01.831Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:19:39.984Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:57.290Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:54.818Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:50.929Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:55.785Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:49:07.903Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:25:38.122Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:53.903Z","0.21.0-canary.d84df029.0":"2021-02-16T19:09:11.479Z","0.21.0-canary.c525f471.0":"2021-02-17T20:54:26.402Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:54.907Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:39:02.362Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:03:04.890Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:20:16.633Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:16:04.971Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:11:05.016Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:57.016Z","0.21.0-canary.12574572.0":"2021-03-02T20:30:21.846Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:35:33.511Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:49:03.964Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:12:08.696Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:52:30.897Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:23:13.893Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:28:01.019Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:24:20.022Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:25:34.871Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:28:20.408Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:42:01.758Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:52:28.218Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:50.360Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:52:35.636Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:38:03.838Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:24:42.414Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:47:31.358Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:30:28.020Z","0.21.0-canary.0138863c.0":"2021-03-11T18:37:50.157Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:19:34.651Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:51.774Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:33:16.273Z","0.21.0-canary.4246c082.0":"2021-03-11T22:40:15.106Z","0.21.0-canary.2d736253.0":"2021-03-15T22:36:41.658Z","0.21.0-canary.7033124d.0":"2021-03-16T18:38:31.142Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:55.734Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:05:41.050Z","0.21.0-canary.572107b5.0":"2021-03-18T23:55:07.399Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:53.681Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:47.994Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:22:11.560Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:41:55.025Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:09:19.710Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:12:14.502Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:48:37.202Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:49:09.350Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:15:24.102Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:58.870Z","0.21.0-canary.852f873c.0":"2021-04-02T05:23:01.521Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:45:11.643Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:52.780Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:53.965Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:37:18.543Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:43:36.249Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:40.730Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:49.618Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:12:29.198Z","0.21.0-canary.e142c144.0":"2021-04-12T14:51:25.939Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:06:12.865Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:40:04.264Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:42:42.210Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:27:03.511Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:51.042Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:11:11.787Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:48.360Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:48.183Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:47:25.362Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:53.099Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:10:16.674Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:20:22.350Z","0.21.0-canary.0875e898.0":"2021-04-30T21:28:15.402Z","0.21.0":"2021-04-30T23:58:27.673Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:06:03.628Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:58.527Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:34:20.032Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:11:26.496Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:40.121Z","0.22.0-canary.5813480a.0":"2021-05-05T18:26:09.297Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T18:00:17.920Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:58.064Z","0.22.0-canary.c497962b.0":"2021-05-07T22:20:37.653Z","0.22.0-canary.e300688e.0":"2021-05-07T22:25:03.962Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:30:04.840Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:35:19.858Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:35:27.259Z","0.22.0-canary.004aca62.0":"2021-05-11T18:07:09.818Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:56.626Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:52:24.547Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:01:24.287Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:18:06.658Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:04:10.812Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:56.018Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:59:12.420Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:50:37.695Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:59:14.512Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:48.624Z","0.22.0-canary.2212691a.0":"2021-05-17T23:53:25.481Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:23:18.620Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:42.355Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:41:00.441Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:48.460Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:17:12.238Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:03:37.123Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:03:06.093Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:13:07.632Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:01:12.317Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:06:18.789Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:49.990Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:14:06.381Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:56.294Z","0.22.0-canary.227a4614.0":"2021-05-27T16:04:07.840Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:46:06.691Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:52.033Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:53.119Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:46:21.257Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:55.334Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:37:26.118Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:46.039Z","0.22.0-canary.e1511867.0":"2021-06-12T00:58:03.147Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:52:42.015Z","0.22.0-canary.573d8913.0":"2021-06-18T23:27:32.909Z","0.22.0-canary.21dba001.0":"2021-06-21T21:41:23.602Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:50.516Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:55.015Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:47.358Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:18:04.577Z","0.22.0-canary.73122cba.0":"2021-06-30T19:37:35.993Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:50.585Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:33:11.416Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:47:14.240Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:01:06.220Z","0.22.0-canary.2226489a.0":"2021-07-08T18:02:20.428Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:03:34.489Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:17:38.759Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:38:28.900Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:51.514Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:19:27.880Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:27:25.356Z","0.22.1":"2021-07-14T22:53:16.182Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:56.638Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:40:19.775Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:04:32.566Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:23:23.049Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:50.213Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:09:35.254Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:45.062Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:59.194Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:08:30.793Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:52.532Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:07:20.730Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:48.672Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:08:35.713Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:51:31.080Z","0.23.0-canary.104debd5.0":"2021-07-19T22:54:21.136Z","0.23.0-canary.4612705d.0":"2021-07-20T16:05:26.859Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:35:24.411Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:42.654Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:40.852Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:50.117Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:59.126Z","0.23.0-canary.d595e030.0":"2021-07-23T20:54:00.011Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:57:33.414Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:44.203Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:49.829Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:56.200Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:23:26.730Z","0.23.0-canary.ab310900.0":"2021-07-28T20:22:14.183Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:58.701Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:45.155Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:14:36.452Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:48:33.263Z","0.23.0-canary.21918905.0":"2021-08-03T21:15:17.828Z","0.23.0-canary.193c87be.0":"2021-08-04T18:08:31.633Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:41.993Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:48:18.293Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:39.367Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:11:22.045Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:41.366Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:45.769Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:22:27.011Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:53.498Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:25:02.836Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:48.573Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:39:16.011Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:24:07.956Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:01:10.648Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:03:00.553Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:28:11.909Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:57:30.418Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:22:21.030Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:27:06.722Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:43:28.636Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:56.280Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:51:14.409Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:42.873Z","0.23.0-canary.756208fb.0":"2021-08-25T19:51:38.174Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:48.181Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:27:03.537Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:44.650Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:08:39.032Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:55.530Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:29:38.351Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:32:25.599Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:50.009Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:26:18.521Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:27:32.523Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:17:03.942Z","0.23.0-canary.4962a163.0":"2021-09-07T23:54:16.136Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:14:27.994Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:37.507Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:27:10.361Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:49.405Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:21:35.181Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:27:11.937Z","0.23.0":"2021-09-13T21:36:10.363Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:56.636Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:33:03.167Z","0.24.0-canary.583613a9.0":"2021-09-14T16:56:06.863Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:33:10.274Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:44.822Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:14:03.238Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:46.725Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:09:25.993Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:33:05.337Z","0.24.0-canary.a7132082.0":"2021-09-15T21:46:35.290Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:46:26.455Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:40.929Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:09:20.098Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:42.603Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:28.463Z","0.24.0-canary.569d739f.0":"2021-09-20T21:24:28.434Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:01:27.710Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:47.495Z","0.25.1":"2021-09-21T03:12:59.260Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:42.829Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:51.824Z","0.26.0-canary.07e91417.0":"2021-09-22T21:06:23.873Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:28:14.230Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:43.189Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:57.548Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:42:05.593Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:51:26.093Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:06:27.329Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:28.227Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:51.724Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:34:10.888Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:53.457Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:54.958Z","0.25.2":"2021-10-11T23:18:49.427Z","0.26.0-canary.406d6fe1.0":"2021-10-13T21:00:02.459Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:33.176Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:24:11.687Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:33:04.343Z","0.25.3":"2021-10-21T17:56:00.579Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:18:05.791Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:30.985Z","0.26.0-canary.232327ee.0":"2021-11-01T20:16:22.555Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:01:20.294Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:08:27.926Z","0.26.0-canary.f3e28323.0":"2021-11-02T19:00:10.002Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:36.251Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:39.841Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:30.875Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:23:02.639Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:11:04.873Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:37:07.632Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:06:33.389Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:49.222Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:46:26.651Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:28:07.076Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:45.909Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:46.910Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:42.314Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:06:01.689Z","0.26.0":"2022-05-03T17:30:51.282Z","0.26.1":"2022-05-09T20:32:10.826Z","0.27.0":"2022-08-12T19:12:27.498Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design select web component","license":"Apache-2.0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-select.svg)](https://www.npmjs.com/package/@material/mwc-select)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSelects display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: exposed dropdown menus](https://material.io/components/menus/#exposed-dropdown-menu)\n\n[Demo](https://material-components.github.io/material-web/demos/select/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-select\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic (filled)\n\nNote, `mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nits main slot has the same interface as the main slot of a `mwc-list`.\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n\n```\n\n### Outlined\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Preselected\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Icon\n\nIcon is a material-icons font name. Additionally, all options must have\n`graphic=\"icon\"` defined to enable proper spacing.\n\n\n
\n\n\n```html\n\n Option 1\n Option 2\n Option 3\n\n```\n\n### Required (error, validation message)\n\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Helper Text\n\n\n
\nfocused:\n
\n\n
\n\n\n```html\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n### Styled\n\n\n
\n\n\n```html\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n\n \n Item 0\n Item 1\n Item 2\n Item 3\n\n```\n\n## API\n\n### Slots\n\nName | Description\n--------- | ----------------------------------------------------------------\n_default_ | Content to display in the selects internal `` element.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list), so\nthe default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n------------------------- | ----------------------------- | ------------------ | -----------\n`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.\n`label` | `string` | `\"\"` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.\n`naturalMenuWidth` | `string` | `false` | Sets the dropdown menu's width to `auto`.\n`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.\n`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.\n`disabled` | `boolean` | `false` | Whether or not the select should be disabled.\n`outlined` | `boolean` | `false` | Whether or not to show the material outlined variant.\n`helper` | `string` | `\"\"` | Helper text to display below the select. Always displays by default.\n`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.\n`validationMessage` | `string` | `\"\"` | Message to show in the error color when the select is invalid. (Helper text will not be visible)\n`selected` | `ListItemBase`\\|`null` | `null` | Selected list item element.\n`items` | `ListItemBase[]` | `[]` | List of selectable items.\n`index` | `number` | `-1` | Index of selected list item.\n`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.\n`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.\n`validateOnInitialRender` | `boolean` | `false` | Runs validation check on initial render.\n\n\\* `DefaultValidity` is: `ts { badInput: false, customError: false,\npatternMismatch: false, rangeOverflow: false, rangeUnderflow: false,\nstepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,\nvalid: true, valueMissing: false, }`\n\n\\** See\n[`mwc-textfield`'s properties section](https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes)\nfor more info.\n\n### Methods\n\nName | Description\n--------------------------------------------- | -----------\n`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.
**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `.updateComplete`.\n`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n`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.\n`select(index: number) => void` | Selects the element at the given index.\n`layout(updateItems = true) => Promise` | 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.\n`layoutOptions() => Promise` | 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.\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | -------------------- | ----------------- | -------------------- |\n| `opened` | `mwc-select-surface` | none | Fired menu opens. |\n| `closed` | `mwc-select-surface` | none | Fired menu closes. |\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2)\nfor more details.\n\n### CSS Custom Properties\n\n`mwc-select` internally uses both `mwc-menu` and `mwc-list`, so all custom\nproperties from `mwc-menu` and `mwc-list` propagate through `mwc-select`.\n\nName | Default | Description\n--------------------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.\n`--mdc-select-idle-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_0,0,0,42.png) `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.\n`--mdc-select-hover-line-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.\n`--mdc-select-outlined-idle-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.\n`--mdc-select-outlined-hover-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.\n`--mdc-select-outlined-disabled-border-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_0,0,0,16.png) `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.\n`--mdc-select-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_245,245,245.png) `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).\n`--mdc-select-disabled-fill-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_250,250,250.png) `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.\n`--mdc-select-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.\n`--mdc-select-label-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.\n`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.\n`--mdc-select-disabled-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_0,0,0,37.png) `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.\n`--mdc-select-dropdown-icon-color` | `rgba(0, 0, 0, 0.54)` | Color of the dropdown icon when select is not activated.\n`--mdc-select-focused-dropdown-icon-color` | `--mdc-theme-primary` | Color of the dropdown icon when select is activated.\n`--mdc-select-disabled-dropdown-icon-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/select/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Opacity of the dropdown icon when disabled.\n`--mdc-select-error-dropdown-icon-color` | `--mdc-select-error-color` | Color of the dropdown icon when select is invalid.\n\n`mwc-select` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------ | -----------\n| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.\n| `--mdc-typography-subtitle1-` | Styles the typography of the selected text.\n\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/#exposed-dropdown-menu)\n","readmeFilename":"README.md","homepage":"https://github.com/material-components/material-components-web-components#readme","keywords":["material design","web components","select"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/select"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"}}